@extends('frontend::layouts.master')

@section('content')

    {{-- Banner Slide --}}
    <livewire:frontend::carousel.splide-carousel slideName="splide-banner" index='0' />

    <div class="container py-12 md:py-16">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full px-4">
                <div class="text-center mx-auto mb-12 lg:mb-16 max-w-[510px]">
                    <span class="font-semibold text-lg text-primary mb-2 block">
                        Our Products
                    </span>
                    <h2 class="font-bold text-3xl sm:text-4xl md:text-[40px] text-dark mb-4 ">
                        Best Of Gadget
                    </h2>
                    <p class="text-base text-body-color">
                        There are many variations of passages of Lorem Ipsum available
                        but the majority have suffered alteration in some form.
                    </p>
                </div>
            </div>
        </div>
        <div class="com-carousel-multi splide splide-games -mr-container-edge">
            <div class="splide__track carousel-multi-wrapper">
                <div class="splide__list carousel-multi-list">
                    @for ($example = 1; $example < 4; $example++)
                        @for ($i = 1; $i < 7; $i++)
                            {{-- Slide Required --}}
                            <div class="splide__slide carousel-multi-slide">
                                <div class="carousel-multi-item p-2">

                                    {{-- Slide Item --}}
                                    <div class="game-card">
                                        <a href="product-detail">
                                            <div class="img-wrapper">
                                                <img src="{{ Module::asset('frontend:img/pd'. $i . '.jpg') }}" alt="">
                                            </div>
                                            <p>Product Name</p>
                                        </a>
                                    </div>

                                    {{-- Closed Slide Required --}}
                                </div>
                            </div>
                        @endfor
                    @endfor

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


    <div class="relative flex flex-col justify-center overflow-hidden bg-gray-50 px-4 xl:px-0 py-16 md:py-24">
        <div class="w-full items-center mx-auto max-w-screen-lg">
            <div class="group grid w-full grid-cols-1 lg:grid-cols-2">
                <div class="order-2 lg:order-1 mt-12 lg:mt-0">
                    <div class="text-editor lg:pr-12">
                        <p class="peer mb-6">
                            Simply Air Conditioning London are fixed system heating and air conditioning installation specialists. Because we’ve tested all heating and air conditioning unit manufacturers before using them there are no hidden surprises for our customers. We only supply air conditioning units from the leading manufacturers so any system we fit will be of the highest quality. We also thoroughly test every type of unit before supplying..
                        </p>
                        <p class="mb-6">
                            We also provide tailored Air Conditioning installation packages. The Air Conditioning systems we install are all inverter driven therefor are energy efficient, stylish & silent both providing cooling and heating. At Zero Degree AC Limited we only use the best brands.
                        </p>
                        <h3 class="mb-4 font-semibold text-xl ">Conditioning installation packages</h3>
                        <ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 leading-5">
                            <li>Lorem Ipsum Conditioning installation packages</li>
                            <li>Air Conditioning London are fixed system heating of olive oil</li>
                            <li>We also thoroughly test every type of unit before supplying</li>
                        </ul>
                    </div>
                    <a class="font-bold flex justify-center sm:hidden mt-12 items-center gap-2" href="">
                        <span>MORE ABOUT US</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                        </svg>
                    </a>
                </div>
                <div class="order-1 lg:order-2 w-full sm:w-4/5 md:w-3/5 mx-auto lg:w-auto pl-16 relative flex items-end flex-col ">
                    <div class="absolute top-0 left-0 bg-primary min-h-[225px] lg:min-h-[350px] w-4/6 p-8 lg:py-14 flex flex-col justify-center rounded-xl group-hover:bg-primary transition-all ">
                        <span class="block mb-5 lg:mb-10 text-white font-light group-hover:text-orange-300">WHO WE ARE?</span>
                        <h2 class="text-white font-bold text-3xl line-clamp-5 leading-8">
                            We are doing about mobile accessory, audio and PC.
                        </h2>
                    </div>
                    <div class="sm:hidden py-12"></div>
                    <a class="font-bold hidden sm:flex mt-2 mb-6 -mr-8 items-center gap-2" href="">
                        <span>MORE ABOUT US</span>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                        </svg>
                    </a>
                    <div class="rounded-xl overflow-hidden aspect-[1/1]">
                        <img src="{{ Module::asset('frontend:img/about.jpg') }}" alt="" class="img-full-cover">
                    </div>
                </div>
            </div>
        </div>
    </div>

    
  
    {{-- <section class="pt-20 lg:pt-[120px] pb-10 lg:pb-20 bg-[#F3F4F6]"> --}}
    <section class="pt-16 pb-10 lg:pb-20 bg-[#F3F4F6]">
        <div class="container">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full px-4">
                    <div class="text-center mx-auto mb-12 lg:mb-16 max-w-[510px]">
                        <h2 class="font-bold text-3xl sm:text-4xl md:text-[40px] text-dark mb-4 ">
                            News & Activities
                        </h2>
                        <p class="text-base text-body-color">
                            There are many variations of passages of Lorem Ipsum available
                            but the majority have suffered alteration in some form.
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap -mx-2 2xl:-mx-4">

                @for ($i = 0; $i < 4; $i++)
                    <div class="w-full md:w-1/2 xl:w-1/4 px-2 2xl:px-4">
                        <div class="bg-white rounded-lg overflow-hidden mb-10">
                            <img src="{{ Module::asset('frontend:img/blog.jpg') }}" alt="Blog" class="w-full">
                            <div class="p-4 xl:p-7 text-center">
                                <h3>
                                    <a href="#" class="leading-6 font-semibold text-dark text-xl sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] mb-4 block hover:text-primary">
                                        Lorem ipsum dolor sit amet pretium consectetur adipiscing elit.
                                    </a>
                                </h3>
                                <p class="text-base text-body-color mb-7">
                                    Lorem ipsum dolor sit amet pretium consectetur adipiscing elit. Lorem consectetur adipiscing elit.
                                </p>
                                <a href="#" class="mb-2 inline-block py-2 px-7 border border-[#E5E7EB] rounded-[10px] text-base text-body-color font-medium hover:border-primary hover:bg-primary hover:text-white transition">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                @endfor

            </div>
            <a class="font-bold flex justify-center items-center gap-2" href="">
                <span>VIEW ALL</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                </svg>
            </a>
        </div>
    </section>
@endsection