@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

    @include('layouts.navbar')
    <div>
        <div class="relative flex justify-center items-center">
            <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">
                        <a href="{{ url('/') }}" class="text-white hover:text-orange-600">Home</a> 
                         &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 class="text-justify leading-relaxed">
                          
                            <br>
                            <br>
                   

                            <br>
                            <br>
                            The fundamental philosophy we keep sticking with is the quality of products. R Web Solution
                            persistently maintains providing high-quality products. We ensure every product adheres to
                            quality criteria and meets the requirements of our clients. Unrelenting drive to be the best at
                            what we do underpins activity throughout our vertically integrated business life cycle.
                        </p>
                    </div>
                </div>
            </div>
        </div>

{{-- Feature Component --}}
        <div class="py-8 md:py-12">
            <div class="relative w-full">
                <div class="grid grid-cols-1 md:grid-cols-3 container mx-auto gap-6 md:gap-4">
                    
                    <!-- Feature 1 -->
                    <div class="flex flex-col sm:flex-row items-center text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4 p-4">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-nationwide.webp') }}" alt="Free Delivery"
                                class="w-20 sm:w-24 md:w-28 lg:w-32 h-auto">
                        </div>
                        <div>
                            <h2 class="font-semibold text-lg sm:text-xl mb-2">Free Delivery Nationwide</h2>
                            <p class="text-sm sm:text-base text-gray-700">
                                Enjoy free delivery on eligible orders, saving you time and money.
                            </p>
                        </div>
                    </div>

                    <!-- Feature 2 -->
                    <div class="flex flex-col sm:flex-row items-center text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4 p-4">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-personalized.webp') }}" alt="Personalized Customer Service"
                                class="w-20 sm:w-24 md:w-28 lg:w-32 h-auto">
                        </div>
                        <div>
                            <h2 class="font-semibold text-lg sm:text-xl mb-2">Personalized Customer Service</h2>
                            <p class="text-sm sm:text-base text-gray-700">
                                Personalized attention from our friendly and knowledgeable staff, ensuring a positive and hassle-free shopping experience.
                            </p>
                        </div>
                    </div>

                    <!-- Feature 3 -->
                    <div class="flex flex-col sm:flex-row items-center text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4 p-4">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/icon-quality.webp') }}" alt="Quality Assurance"
                                class="w-20 sm:w-24 md:w-28 lg:w-32 h-auto">
                        </div>
                        <div>
                            <h2 class="font-semibold text-lg sm:text-xl mb-2">Quality Assurance</h2>
                            <p class="text-sm sm:text-base text-gray-700">
                                Guaranteed quality steel products, rigorously tested for strength, durability, and compliance with industry standards.
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

{{--End Feature Component --}}

        <div class="relative  py-4 ">
            <div class="h-full relative w-full container mx-auto">
                <!-- 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-[#F66D10] 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">To be the leading provider of
                                sports and fitness
                                solutions, recognized for our unwavering commitment to innovation, customer satisfaction,
                                and fostering a global community of fitness enthusiasts..</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">To inspire and empower individuals
                                to lead active,
                                healthy lives by providing top-tier sports and fitness products
                                that deliver unmatched quality, performance, and value</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class=" relative w-full bg-cover bg-center container mx-auto px-4">
            <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 text-center">
                        Every move counts—whether training, playing, or staying fit. Our quality
                        sports and fitness products are designed to boost your
                        performance and motivate you toward a healthy lifestyle.
                    </p>
                </div>
            </div>
        </div>

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

@endsection