@extends('layouts.main-app')

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

@section('content')

        <style>
                .roboto-font {
                    font-family: 'Roboto Condensed', sans-serif;
                }
                /* 
                .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;
                }

                    /* Shrunk Navbar Style */
                    #navbar.shrink {
                    margin: 0 auto;
                    width: 65%;
                }
                /* Shrunk Navbar Style */
                #navbar.unshrink {
                    margin: 0 auto;
                    width: 100%;
                }

        </style>


{{-- @include('layouts.navbar') --}}

 @include('layouts.header')
    
    
    
        <div class="">


                
              

        {{-- news article--}}

            {{-- 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 scale-75 sd:scale-95 md:scale-100">
                <img src="{{ asset('assets/about/Mission.webp') }}" alt="" srcset="">
                <h3 class="text-5xl font-semibold absolute bottom-0">Our Brand</h3>
            </div>

            {{-- brand wrapper --}}
            <div class="w-full h-auto grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 mt-20 px-4 gap-4">
                {{-- Iterate over the brands --}}
                @foreach ($brands as $brand)
                    <a href="{{ url('/about-us/brand/items', $brand->id) }}" class="hover:scale-105 duration-150 transition-all ease-in-out">
                        <div class="relative mb-20">
                            {{-- Brand Icon/Image One --}}
                            @if ($brand->image_one)
                                <img src="{{ asset('images/hex.png') }}" alt="Brand Icon" class="absolute -top-8 -left-4 md:left-0 h-20 scale-75 md:scale-100">
                                <img src="{{ asset($brand->image_one) }}" alt="Brand Icon" class="absolute -top-8 -left-2 md:left-2 h-20 scale-50 md:scale-[40%]">
                            @else
                                <img src="{{ asset('assets/about/placeholder-icon.webp') }}" alt="Placeholder Icon" class="absolute -top-8 -left-2 md:left-0 h-20 scale-75 md:scale-100">
                            @endif
                            {{-- Brand Image Two --}}
                            @if ($brand->image_two)
                                <img src="{{ asset($brand->image_two) }}" alt="Brand Image" class="h-[290px] md:h-[380px] w-[313px] rounded object-fill shadow-md shadow-gray-500">
                            @else
                                <img src="{{ asset('assets/about/placeholder-brand.webp') }}" alt="Placeholder Image">
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
            

            </section>


         </div>


@endsection