@extends('layouts.main-app')

@section('title', 'About Us')

@section('content')

    <style>
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }

        /* Shrunk Navbar Style */
        #navbar.shrink {
            margin: 0 auto;
            width: 65%;
        }
        .hidden {
            display: block;
            opacity: 0;
            transform: translateY(20px); /* Optional: adds a slide effect */
            transition: opacity 0.3s ease, transform 0.3s ease; /* Transition effect */ 
            }   
                    
        .roboto-font {
            font-family: 'Roboto Condensed', sans-serif;
        }

      
    </style>


    <div class="">

        <!-- About header Section -->
        <section class="bg-cover bg-center h-64" style="background-image: url('https://via.placeholder.com/1200x400');">
            <div class="h-full w-full flex items-center justify-center bg-gray-900 bg-opacity-50">
                <h1 class="text-4xl text-white font-bold">About Us Mission and Vision</h1>
            </div>
        </section>

        {{-- section brand --}}
        <section class="h-auto w-full container max-w-screen-lg mx-auto">
          <div class="relative w-full h-auto flex justify-center items-center py-4">
            <img src="{{ asset('assets/about/Mission.webp') }}" alt="" srcset="">
            <h3 class="text-5xl font-semibold absolute bottom-0">Our Brand</h3>
          </div>
          {{-- supplies wrapper --}}
          <div class="w-full h-auto grid grid-cols-3 py-10 mt-8 gap-y-10 ">
            {{-- supplies card --}}
              <div class=" mx-auto bg-white border border-gray-400 rounded-lg shadow-md  overflow-hidden">
                <!-- Image -->
                <img src="{{ asset('assets/smn/Glove.webp') }}" alt="Glove - Impact 4550" class="bg-[#EDEDED] rounded-t-lg w-full h-auto py-24 px-6 object-cover hover:scale-110 transition-all duration-300 ">
                <!-- Content -->
                <div class="p-4 roboto-font">
                    <h3 class="text-lg font-bold text-gray-800">Glove - Impact 4550</h3>
                    <p class="text-sm text-gray-500">Personal Protective Equipment</p>
                    <button class="mt-4 px-4 py-2 text-sm font-semibold text-white bg-[#7498D1] rounded hover:bg-blue-600 transition-ease-in-out duration-300">
                        Read Information
                    </button>
                </div>
              </div>
            {{-- supplies card --}}
              <div class=" mx-auto bg-white border border-gray-400 rounded-lg shadow-md  overflow-hidden">
                <!-- Image -->
                <img src="{{ asset('assets/smn/Glove.webp') }}" alt="Glove - Impact 4550" class="bg-[#EDEDED] rounded-t-lg w-full h-auto py-24 px-6 object-cover hover:scale-110 transition-all duration-300 ">
                <!-- Content -->
                <div class="p-4 roboto-font">
                    <h3 class="text-lg font-bold text-gray-800">Glove - Impact 4550</h3>
                    <p class="text-sm text-gray-500">Personal Protective Equipment</p>
                    <button class="mt-4 px-4 py-2 text-sm font-semibold text-white bg-[#7498D1] rounded hover:bg-blue-600 transition-ease-in-out duration-300">
                        Read Information
                    </button>
                </div>
              </div>
            {{-- supplies card --}}
              <div class=" mx-auto bg-white border border-gray-400 rounded-lg shadow-md  overflow-hidden">
                <!-- Image -->
                <img src="{{ asset('assets/smn/Glove.webp') }}" alt="Glove - Impact 4550" class="bg-[#EDEDED] rounded-t-lg w-full h-auto py-24 px-6 object-cover hover:scale-110 transition-all duration-300 ">
                <!-- Content -->
                <div class="p-4 roboto-font">
                    <h3 class="text-lg font-bold text-gray-800">Glove - Impact 4550</h3>
                    <p class="text-sm text-gray-500">Personal Protective Equipment</p>
                    <button class="mt-4 px-4 py-2 text-sm font-semibold text-white bg-[#7498D1] rounded hover:bg-blue-600 transition-ease-in-out duration-300">
                        Read Information
                    </button>
                </div>
              </div>
            {{-- supplies card --}}
              <div class=" mx-auto bg-white border border-gray-400 rounded-lg shadow-md  overflow-hidden">
                <!-- Image -->
                <img src="{{ asset('assets/smn/Glove.webp') }}" alt="Glove - Impact 4550" class="bg-[#EDEDED] rounded-t-lg w-full h-auto py-24 px-6 object-cover hover:scale-110 transition-all duration-300 ">
                <!-- Content -->
                <div class="p-4 roboto-font">
                    <h3 class="text-lg font-bold text-gray-800">Glove - Impact 4550</h3>
                    <p class="text-sm text-gray-500">Personal Protective Equipment</p>
                    <button class="mt-4 px-4 py-2 text-sm font-semibold text-white bg-[#7498D1] rounded hover:bg-blue-600 transition-ease-in-out duration-300">
                        Read Information
                    </button>
                </div>
              </div>
            {{-- supplies card --}}
              <div class=" mx-auto bg-white border border-gray-400 rounded-lg shadow-md  overflow-hidden">
                <!-- Image -->
                <img src="{{ asset('assets/smn/Glove.webp') }}" alt="Glove - Impact 4550" class="bg-[#EDEDED] rounded-t-lg w-full h-auto py-24 px-6 object-cover hover:scale-110 transition-all duration-300 ">
                <!-- Content -->
                <div class="p-4 roboto-font">
                    <h3 class="text-lg font-bold text-gray-800">Glove - Impact 4550</h3>
                    <p class="text-sm text-gray-500">Personal Protective Equipment</p>
                    <button class="mt-4 px-4 py-2 text-sm font-semibold text-white bg-[#7498D1] rounded hover:bg-blue-600 transition-ease-in-out duration-300">
                        Read Information
                    </button>
                </div>
              </div>
          

        </section>




        
 
      
            

  
        @include('layouts.footer')
    </div>


@endsection