@extends('layout.layout')
@section('home','active')
@section('content')

<!-- Main content -->
<section class="content">

    <div class="row p-3">
        <!-- Footwear Request -->
        <div class="col-12 col-lg-4 col-xl-4 mt-2">
            <div class="card h-100 mb-0 bg-gradient-dark">
            <a href="{{ route('footwear.request.index') }}" class="text-decoration-none position-relative d-block">
                <img class="custom-img" src="{{ asset('res/shoes.png') }}" alt="Footwear Request">
                <h1 class="overlay-text position-absolute w-100 mb-0" style="bottom: 0; left: 0;">
                Footwear Request
                </h1>
            </a>
            </div>
        </div>

        <!-- Stock Check -->
        <div class="col-6 col-md-6 col-lg-4 col-xl-4 mt-2 pr-1">
            <div class="card mb-0 bg-gradient-dark">
            <a href="{{ route('stock.check') }}" class="text-decoration-none position-relative d-block">
                <img class="custom-img2" src="{{ asset('res/stock.jpg') }}" alt="Stock Check">
                <h1 class="overlay-text1 position-absolute w-100 mb-0" style="bottom: 0; left: 0;">
                Stock Check
                </h1>
            </a>
            </div>
        </div>

        <!-- Price Check -->
        <div class="col-6 col-md-6 col-lg-4 col-xl-4 mt-2 pl-1">
            <div class="card mb-0 bg-gradient-dark">
            <a href="{{ route('price.check') }}" class="text-decoration-none position-relative d-block">
                <img class="custom-img2" src="{{ asset('res/pricecheck.jpeg') }}" alt="Price Check">
                <h1 class="overlay-text2 position-absolute w-100 mb-0" style="bottom: 0; left: 0;">
                Price Check
                </h1>
            </a>
            </div>
        </div>
    </div>


</section>
<!-- /.content -->

@endsection

@section('javascript')
    <script src="{{asset('js/home.js')}}"></script>
@endsection