@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<section class="mainBanner relative">
    <div
        class="bannerInner relative bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] w-[95%] mx-auto rounded-3xl px-4 sm:px-8 md:px-12 lg:px-20 pt-8 pb-6 md:pt-10 md:pb-5">
        <div class="container">
            <div class="flex flex-col md:flex-row md:items-center justify-center gap-8 md:gap-4">
                <div class="w-full md:w-1/3 lg:mr-12 xl:mr-16 text-center md:text-left">
                    <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-6xl text-black font-bold relative mb-4">
                        {{ $page->findSection('banner-heading') }}
                        <img src="{{ asset('front/images/shape.webp') }}" class="my-5 hidden md:block" />
                    </h1>
                    <p class="text-lg sm:text-xl md:text-xl lg:text-2xl font-normal mb-6">
                        {{ $page->findSection('banner-content') }}
                    </p>
                    <div class="imgBox flex flex-col sm:flex-row gap-4 sm:gap-5 justify-center md:justify-start items-center">
                        <a href="#!" class="block"><img src="{{ asset('front/images/apple-btn.webp') }}" class="w-full max-w-[160px] h-auto" /></a>
                        <a href="#!" class="block"><img src="{{ asset('front/images/google-btn.webp') }}" class="w-full max-w-[160px] h-auto" /></a>
                    </div>
                </div>
                <div class="w-full md:w-2/3 lg:-mr-20 flex justify-center">
                    <img src="{{ asset($page->image) }}" class="w-full max-w-lg md:max-w-none h-auto" />
                </div>
            </div>
        </div>
    </div>
    <img src="{{ asset('front/images/banner-left.webp') }}"
        class="absolute -bottom-[10rem] left-0 max-[1200px]:hidden max-[1336px]:-bottom-[13rem]" />
</section>
<section class="aboutMain py-16 sm:py-20 md:py-32 lg:py-52 relative">
    <div class="container px-4 sm:px-6 lg:px-8">
        <div class="w-full sm:w-[90%] md:w-[80%] lg:w-[70%] mx-auto">
            <h2 class="text-center text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative mb-8 md:mb-12">{{ $page->findSection('simplify-heading') }}
                <img src="{{ asset('front/images/shape2.webp') }}" class="my-5 ml-[3rem] hidden md:block" />
            </h2>
        </div>
        <div class="flex flex-col md:flex-row items-center gap-8 md:gap-0">
            <div class="w-full md:w-1/2 flex justify-center">
                <img src="{{ asset($page->findSection('simplify-image')) }}" class="w-full max-w-md md:max-w-none h-auto" />
            </div>
            <div class="w-full md:w-1/2 px-4 md:px-6">
                {!! $page->findSection('simplify-content') !!}
                 <!-- <p class="text-[1.375rem] font-normal leading-6 text-textColor max-[1336px]:text-[1rem]">Imagine a garden that thrives
                    effortlessly, no matter your level of experience. Harvest Hub empowers you with AI-driven tools
                    to manage every aspect of your garden, tailored to your unique growing zone and environment.
                    From tracking tasks like watering, fertilizing, and harvesting to receiving custom
                    recommendations on planting and companion crops, our platform transforms gardening from
                    guesswork into a science-backed delight. Whether you’re planning your first garden bed or
                    optimizing a seasoned plot, Harvest Hub ensures your plants flourish with ease.
                </p>
                <h3 class="text-3xl font-semibold text-black mt-5 max-[1336px]:text-2xl">Grow Smarter, Connect Deeper</h3>
                <p class="text-lg font-normal text-textColor max-[1336px]:text-[.9rem]">At Harvest Hub, we believe gardening is more than just
                    growing plants; it’s about cultivating a community. With features like dynamic plant care plans,
                    location-specific insights, and access to a thriving network of like-minded gardeners, our tool
                    keeps you connected and inspired.
                </p> -->
                <!-- <p class="text-[1.375rem] font-normal leading-6 text-textColor">Imagine a garden that thrives
                        effortlessly, no matter your level of experience. Harvest Hub empowers you with AI-driven tools
                        to manage every aspect of your garden, tailored to your unique growing zone and environment.
                        From tracking tasks like watering, fertilizing, and harvesting to receiving custom
                        recommendations on planting and companion crops, our platform transforms gardening from
                        guesswork into a science-backed delight. Whether you’re planning your first garden bed or
                        optimizing a seasoned plot, Harvest Hub ensures your plants flourish with ease.
                    </p>
                    <h3 class="text-3xl font-semibold text-black mt-5">Grow Smarter, Connect Deeper</h3>
                    <p class="text-lg font-normal text-textColor">At Harvest Hub, we believe gardening is more than just
                        growing plants; it’s about cultivating a community. With features like dynamic plant care plans,
                        location-specific insights, and access to a thriving network of like-minded gardeners, our tool
                        keeps you connected and inspired.
                    </p> -->
                <a href="{{route('easy.garden.planing')}}"
                    class="group px-4 py-2 border-solid border rounded-full border-secondary text-white bg-secondary inline-flex items-center justify-center gap-2 hover:bg-primary hover:text-black transition-all mt-5">
                    Start
                    Managing
                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="13.5256" cy="14.3455" r="13.5256" fill="#FFDD0F" />
                        <path
                            d="M8.66016 13.8455C8.38401 13.8455 8.16016 14.0693 8.16016 14.3455C8.16016 14.6216 8.38401 14.8455 8.66016 14.8455V13.8455ZM18.7443 14.699C18.9396 14.5038 18.9396 14.1872 18.7443 13.9919L15.5623 10.8099C15.3671 10.6147 15.0505 10.6147 14.8552 10.8099C14.66 11.0052 14.66 11.3218 14.8552 11.517L17.6837 14.3455L14.8552 17.1739C14.66 17.3691 14.66 17.6857 14.8552 17.881C15.0505 18.0763 15.3671 18.0763 15.5623 17.881L18.7443 14.699ZM8.66016 14.8455H18.3908V13.8455H8.66016V14.8455Z"
                            fill="black" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <img src="{{ asset('front/images/aboutRight.webp') }}" class="absolute right-0 bottom-0 max-[1336px]:-bottom-[4rem] max-[1200px]:hidden" />
</section>
<section class="liveEventSection">
    <div
        class="liveEventAsc relative pt-8 sm:pt-10 mx-auto before:content[''] before:absolute before:h-[95%] before:w-[90%] sm:before:w-[90%] before:left-[50%] before:-translate-x-[50%] before:bg-gradient-to-t before:from-[#FFFFFF] before:from-[-10%] before:to-100% before:to-[#014C26] before:z-[-1] before:rounded-3xl before:top-0">
        <div class="container px-4 sm:px-6 lg:px-8">
            <div class="w-full sm:w-[90%] md:w-[80%] lg:w-[70%] mx-auto">
                <h2 class="text-center text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white font-bold relative mb-6 md:mb-8">
                    {{ $page->findSection('explore-heading') }}
                    <img src="{{asset('front/images/shape3.webp')}}"
                        class="my-5 ml-auto w-[40%] mr-40 hidden md:block" />
                </h2>
            </div>
            <div class="paragraphMain">
                <p class="text-white text-center text-lg sm:text-xl md:text-2xl font-normal mb-6">{{ $page->findSection('explore-sub-heading') }}
                </p>
                <div class="flex flex-col md:flex-row items-start gap-6 md:gap-4 px-4 sm:px-8 md:px-12 lg:px-20">
                    <div class="w-full md:w-1/2">
                        {!! $page->findSection('explore-left-content') !!}
                        <!-- <p class="text-[1.625rem]/[2.25rem] text-white max-[1336px]:text-[1.3rem]/[1.8rem]">Imagine engaging directly with sellers and
                                expert growers in real-time through Explore Live Shows. Dive into the thrill of live
                                shopping, where you can see products demonstrated, ask questions, and receive answers
                                instantly.
                            </p> -->
                    </div>
                    <div class="w-full md:w-1/2">
                        {!! $page->findSection('explore-right-content') !!}
                        <!-- <p class="text-[1rem]/[1.625rem] text-white">Looking to grow your skills? Attend a Live
                                Education Show and learn from seasoned growers who share tips, techniques, and success
                                stories. Whether you're discovering the perfect seeds or mastering new gardening
                                methods, these interactive events connect you with the knowledge and tools you need, all
                                in a dynamic, engaging format.
                            </p>
                            <p class="text-[1rem]/[1.625rem] text-white mt-[0.938rem]">Elevate your experience—join the
                                community, ask your questions, and be part of the moment where inspiration and expertise
                                come alive.
                            </p> -->
                    </div>
                </div>
                <div class="text-center mt-6">
                    <a href="#!"
                        class="px-4 py-2 bg-white border-solid border rounded-full border-secondary inline-flex items-center justify-center gap-2 hover:bg-primary transition-all">
                        Explore
                        Now
                        <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <circle cx="13.5256" cy="14.3455" r="13.5256" fill="#FFDD0F" />
                            <path
                                d="M8.66016 13.8455C8.38401 13.8455 8.16016 14.0693 8.16016 14.3455C8.16016 14.6216 8.38401 14.8455 8.66016 14.8455V13.8455ZM18.7443 14.699C18.9396 14.5038 18.9396 14.1872 18.7443 13.9919L15.5623 10.8099C15.3671 10.6147 15.0505 10.6147 14.8552 10.8099C14.66 11.0052 14.66 11.3218 14.8552 11.517L17.6837 14.3455L14.8552 17.1739C14.66 17.3691 14.66 17.6857 14.8552 17.881C15.0505 18.0763 15.3671 18.0763 15.5623 17.881L18.7443 14.699ZM8.66016 14.8455H18.3908V13.8455H8.66016V14.8455Z"
                                fill="black" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="swiper liveEvents mt-[5rem]">
            <div class="swiper-wrapper">
                @foreach ($eventimages as $item)
                <div class="swiper-slide">
                    <a href="#!" class="relative">
                        <img src="{{ asset($item->image) }}" />
                        <span
                            class="inline-block absolute top-4 right-4 px-4 py-1 bg-redSecondary text-white text-bold text-lg font-bold rounded-3xl">Live</span>
                    </a>
                </div>
                @endforeach


            </div>
        </div>
    </div>
</section>
<section class="journeySection py-16 sm:py-20 md:py-32 lg:py-40 px-4 sm:px-6 lg:px-10 relative">
    <div class="container">
        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-0">
            <div class="w-full lg:w-1/3 flex justify-center lg:justify-start">
                <img src="{{ asset('front/images/bg-glow.webp') }}" class="absolute top-[-20rem] left-0 z-[-1] hidden lg:block" />
                <img src="{{ asset($page->findSection('gardening-image-one')) }}" class="w-full max-w-sm lg:max-w-none h-auto" />
            </div>
            <div class="w-full lg:w-1/3 px-4 lg:px-8 order-first lg:order-none">
                <h2 class="text-center text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative mb-6 lg:mb-8">
                    {{ $page->findSection('gardening-heading') }}
                    <img src="{{ asset('front/images/shape4.webp') }}" class="my-5 mx-auto hidden md:block" />
                </h2>
                <div class="text-center">
                    {!! $page->findSection('gardening-content') !!} 
                </div>
            </div>
            <div class="w-full lg:w-1/3 flex justify-center lg:justify-end">
                <img src="{{ asset($page->findSection('gardening-image-two')) }}" class="w-full max-w-sm lg:max-w-none h-auto" />
                <img src="{{ asset('front/images/bg-glow2.webp') }}" class="absolute -bottom-[200px] right-0 z-[-1] hidden lg:block" />
            </div>
        </div>
    </div>
</section>
<section class="py-16 sm:py-20 px-4 sm:px-6 lg:px-10 relative">
    <div class="container">
        <div class="w-full sm:w-[90%] md:w-[80%] lg:w-[70%] mx-auto">
            <h2 class="text-center text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative mb-8 md:mb-12">
                {{ $page->findSection('smarter-gardening-heading') }}
                <img src="{{ asset('front/images/shape2.webp') }}" class="my-5 mx-auto hidden md:block">
            </h2>
        </div>
        <div class="flex justify-center items-center w-full mx-auto">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-9 my-8 md:my-12 w-full max-w-7xl">
                @foreach ($smarter_gardening as $key => $value)
                <div
                    class="bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699] p-6 sm:p-8 lg:p-10 rounded-[2.438rem] shadow-lg flex flex-col justify-center h-full">
                    <figure class="flex justify-center mb-4">
                        <img src="{{ asset($value->image) }}" alt="{{ $value->heading }}" class="w-16 h-16 sm:w-20 sm:h-20 object-contain">
                    </figure>
                    <h3 class="text-center text-lg sm:text-xl lg:text-2xl font-semibold mb-4">{{ $value->heading }}</h3>
                    <div class="text-center text-sm sm:text-base">
                        {!! $value->content !!}
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        <div class="w-full sm:w-[90%] md:w-3/4 mx-auto pt-16 sm:pt-20 md:pt-32 lg:pt-40">
            <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black text-center font-bold relative mb-8">
                {{ $page->findSection('start-growing-heading') }}
                <img src="{{ asset('front/images/shape6.webp') }}" class="my-5 mx-auto hidden md:block" />
            </h2>
        </div>
        <div class="imgBox flex flex-col sm:flex-row gap-4 sm:gap-5 justify-center items-center pb-8">
            <a href="#!" class="block"><img src="{{ asset('front/images/apple-btn.webp') }}" class="w-full max-w-[160px] h-auto"></a>
            <a href="#!" class="block"><img src="{{ asset('front/images/google-btn.webp') }}" class="w-full max-w-[160px] h-auto"></a>
        </div>
    </div>
</section>
<section
    class="streamSection relative before:content[''] before:absolute before:h-[100%] before:w-[90%] sm:before:w-[90%] before:left-[50%] before:-translate-x-[50%] before:bg-gradient-to-t before:from-[#AABF86] before:from-[-10%] before:to-100% before:to-[#F4FFE1] before:z-[-1] before:rounded-3xl before:top-0 py-10 sm:py-12 lg:py-16">
    <div class="flex flex-col md:flex-row items-center gap-8 md:gap-0 px-4 sm:px-6 lg:px-8">
        <div class="w-full md:w-1/2 flex justify-center md:justify-start">
            <img src="{{ asset($page->findSection('live-streaming-image')) }}"
                class="w-full max-w-sm md:max-w-md lg:max-w-[45%] h-auto md:absolute md:left-0 md:w-[45%] md:top-[50%] md:-translate-y-[50%]" />
        </div>
        <div class="w-full md:w-1/2 px-4 sm:px-6 md:pr-20 lg:pr-40 text-center md:text-left">
            <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative mb-6">{{ $page->findSection('live-streaming-heading') }}
                <img src="{{ asset('front/images/shape5.webp') }}" class="my-5 hidden md:block" />
            </h2>
            <div class="pgMain">
                {!! $page->findSection('live-streaming-content') !!} 
                <a href="{{ route('sell') }}"
                    class="group px-6 py-3 border-solid border rounded-full border-secondary text-white bg-secondary inline-flex items-center justify-center gap-2 hover:bg-primary hover:text-black transition-all mt-6">
                    Start
                    Selling
                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="13.5256" cy="14.3455" r="13.5256" fill="#FFDD0F" />
                        <path
                            d="M8.66016 13.8455C8.38401 13.8455 8.16016 14.0693 8.16016 14.3455C8.16016 14.6216 8.38401 14.8455 8.66016 14.8455V13.8455ZM18.7443 14.699C18.9396 14.5038 18.9396 14.1872 18.7443 13.9919L15.5623 10.8099C15.3671 10.6147 15.0505 10.6147 14.8552 10.8099C14.66 11.0052 14.66 11.3218 14.8552 11.517L17.6837 14.3455L14.8552 17.1739C14.66 17.3691 14.66 17.6857 14.8552 17.881C15.0505 18.0763 15.3671 18.0763 15.5623 17.881L18.7443 14.699ZM8.66016 14.8455H18.3908V13.8455H8.66016V14.8455Z"
                            fill="black" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- Recipe Section -->
<section class="recipeSection py-16 sm:py-20">
    <div class="flex items-center justify-center px-4 sm:px-6 lg:px-8">
        <div class="w-full lg:w-1/2 text-center">
            <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative mb-6 lg:mb-8">{{ $page->findSection('tips-heading') }}
                <img src="{{ asset('front/images/shape6.webp') }}" class="my-5 ml-auto mr-40 hidden md:block" />
            </h2>
            <div class="text-base sm:text-lg">
                {!! $page->findSection('tips-content') !!}
            </div>
        </div>
    </div>
    @include('includes.recipe')
</section>
<!-- Recipe Section Ends -->
<!-- FAQ's Section  -->
@include('layouts.components.faqs')
<!-- FAQ's Section Ends -->
@endsection