@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

    @include('layouts.navbar')
    <div>
        <div class="relative">
            <div class="container mx-auto h-full relative">
                <!-- Background Image -->
                <img src="{{ asset('images/bg-banner.png') }}" alt="Banner"
                    class="object-cover w-full h-[40vh] md:h-[200px]">

                <!-- Text inside the background image -->
                <div class="absolute inset-0 flex flex-col justify-center items-center text-white">
                    <h1 class="text-2xl md:text-4xl font-bold jost-export">ABOUT US</h1>
                    <h4 class="text-sm md:text-lg mt-2 jost-export">Home &gt; About Us</h4>
                </div>
            </div>
        </div>

        <div>
            <div class="grid grid-cols-1 lg:grid-cols-2 container mx-auto">
                <div>
                    <div class="p-14">
                        <img src="{{ asset('images/img-aboutus.png') }}" alt="Banner" class="object-cover w-full h-full ">
                    </div>
                </div>
                <div>
                    <div class=" w-full flex justify-end md:py-14">
                        <img src="{{ asset('images/text-our-story.png') }}" alt="Banner"
                            class=" object-right w-full h-full px-4">
                    </div>
                    <div class="p-4 md:p-0">
                        <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Faucibus laoreet vivamus nam erat aliquet
                            litora molestie. Malesuada mauris pulvinar proin turpis eleifend. Montes luctus sodales semper
                            sapien pellentesque senectus. Tristique ligula himenaeos suscipit at dictumst amet conubia.
                            Facilisis curabitur sed ex pretium eros sociosqu per phasellus auctor. Habitant lacus hendrerit
                            varius nam dis tincidunt congue? Orci nisi sem sem, turpis scelerisque laoreet. Molestie ad in
                            in sapien vivamus arcu.
                            <br>
                            <br>
                            Vulputate est euismod ac varius mattis quisque montes aliquet. Gravida lobortis etiam augue
                            maximus efficitur gravida. Placerat arcu aptent ex congue faucibus aenean elementum. Porttitor
                            posuere ultrices fermentum sollicitudin condimentum quis vitae eget. Bibendum tristique amet
                            suspendisse hendrerit aptent felis sed fusce. Efficitur nunc himenaeos inceptos luctus
                            consectetur bibendum molestie. Dignissim dis sit elementum facilisi quisque; in ultrices.
                            Lobortis condimentum class potenti elit consectetur at pulvinar tortor convallis. Mi tristique
                            cubilia pellentesque fames felis montes libero fringilla commodo. Praesent praesent aptent curae
                            platea nostra facilisi interdum sapien fringilla.
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="py-10 mb-96 md:mb-0">
            <div class="relative py-32">
                {{-- <img src="{{ asset('images/bg-features.jpg') }}" alt="Banner" class="object-contain"> --}}
                <div class="grid grid-cols-1 md:grid-cols-3 container mx-auto absolute inset-0">
                    <div class="flex flex-col md:flex-row items-center w-full h-full gap-5 justify-center">
                        <div class="">
                            <img src="{{ asset('images/icon-freedelivery.png') }}" alt="Banner" class="object-contain">
                        </div>
                        <div class="grid gap-3">
                            <h1 class="text-black font-semibold text-center md:text-start">Free Delivery Nationwide</h1>
                            <h1 class="text-black font-base text-center md:text-start">Enjoy free delivery on eligible
                                orders, <br> saving
                                you
                                time
                                and money</h1>
                        </div>
                    </div>
                    <div class="flex flex-col md:flex-row items-center w-full h-full gap-5 justify-center py-4">
                        <div class="md:w-1/2">
                            <img src="{{ asset('images/icon-cs.png') }}" alt="Banner" class="object-contain">
                        </div>
                        <div class="grid gap-3">
                            <h1 class="text-black font-semibold text-center md:text-start">Personalized Customer Service
                            </h1>
                            <h1 class="text-black font-base text-center md:text-start">Personalized attention from our
                                friendly and knowledgeable
                                staff, ensuring a positive and hassle-free shopping experience.</h1>
                        </div>
                    </div>
                    <div class="flex flex-col md:flex-row items-center w-full h-full gap-5 justify-center">
                        <div class=" md:w-1/2">
                            <img src="{{ asset('images/icon-qa.png') }}" alt="Banner" class="object-contain">
                        </div>
                        <div class="grid gap-3">
                            <h1 class="text-black font-semibold text-center md:text-start">Quality Assurance</h1>
                            <h1 class="text-black font-base text-center md:text-start">Guaranteed quality steel products,
                                rigorously tested for
                                strength, durability. and compliance with industry standards.</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="relative">
            <div class="h-full relative w-full">
                <!-- Background Image -->
                <div class="h-full">
                    <img src="{{ asset('images/bg-vm.png') }}" alt="Banner"
                        class="object-cover w-full h-full absolute inset-0 hidden md:block">
                    <div class="grid grid-cols-1 md:grid-cols-2 relative text-white ">
                        <div class="p-4 bg-[#b50000] md:bg-transparent">
                            <h1 class="text-4xl lg:text-9xl font-bold jost-export text-center">VISION</h1>
                            <h4 class="text-lg mt-2 jost-export lg:px-20 py-2 text-white">Lorem ipsum odor amet,
                                consectetuer
                                adipiscing
                                elit. Quisque
                                pharetra mus senectus rutrum placerat vestibulum diam. Natoque adipiscing molestie egestas
                                dignissim elementum. Litora et non ex nam nostra. Mus duis sodales interdum primis velit
                                nulla
                                lobortis turpis. Nam felis massa gravida vehicula imperdiet nibh convallis habitant
                                elementum.
                                Porttitor inceptos nulla sagittis aptent aenean. Porta penatibus cubilia diam phasellus ante
                                dictum nulla sed convallis. Convallis facilisis neque, adipiscing nullam molestie ut.</h4>
                        </div>
                        <div class="p-4 text-[#b50000] md:bg-transparent">
                            <h1 class="text-4xl lg:text-9xl  font-bold jost-export text-center">MISSION</h1>
                            <h4 class="text-lg mt-2 jost-export lg:px-20 py-2 text-black">Lorem ipsum odor amet,
                                consectetuer
                                adipiscing
                                elit.
                                Quisque
                                pharetra mus senectus rutrum placerat vestibulum diam. Natoque adipiscing molestie egestas
                                dignissim elementum. Litora et non ex nam nostra. Mus duis sodales interdum primis velit
                                nulla
                                lobortis turpis. Nam felis massa gravida vehicula imperdiet nibh convallis habitant
                                elementum.
                                Porttitor inceptos nulla sagittis aptent aenean. Porta penatibus cubilia diam phasellus ante
                                dictum nulla sed convallis. Convallis facilisis neque, adipiscing nullam molestie ut.</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class=" relative w-full bg-cover bg-center">
            <img src="{{ asset('images/bg-img.jpg') }}" alt="">
            <div class="relative inset-0 flex justify-center items-center py-4">
                <div class="bg-black -mt-4 text-white p-4 rounded-lg max-w-lg">
                    <p class="text-sm md:text-base">
                        Lorem ipsum odor amet, consectetuer adipiscing elit. Porttitor justo nibh leo; ante pharetra varius
                        mattis praesent convallis. Tortor taciti venenatis efficitur nulla velit rutrum nullam. Et senectus
                        class lacus, iaculis nibh cras fermentum. Facilisis justo augue accumsan magnis tempor auctor
                        pretium vel.
                    </p>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.footer')

@endsection