@extends('layouts.app')
@section('title', 'Easy Garden Planing')
@section('content')
<section class="relative about-banner">
    <div
        class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] px-4 sm:px-8 md:px-20 py-12 sm:py-16 md:pt-32 md:pb-32 w-[95%] sm:w-[90%] mx-auto rounded-3xl">
        <div class="container">
            <div class="text-center">
                <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-extrabold relative text-center mb-6">{{$page->name}}</h1>
                <p class="text-lg sm:text-xl md:text-2xl font-normal text-center text-textColor mb-8">{{$page->findSection('garden-banner-sub-heading')}}</p>
                <div class="mx-auto text-center">
                    <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">
                        {{$page->findSection('garden-banner-seller-button-text')}}
                        <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>
    <!-- <img src="https://harvest.samplelinkweb.site/assets/images/garden-right.png" class="absolute -bottom-12 h-full right-[4.5rem] object-contain" />
        <img src="https://harvest.samplelinkweb.site/assets/images/garden-left.png" class="absolute -bottom-12 h-full left-[6.5rem] object-contain" /> -->
</section>
<section class="py-16 sm:py-20 md:py-32 lg:py-20 relative w-full sm:w-[90%] md:w-[85%] lg:w-[75%] mx-auto px-4 sm:px-6">
    <div class="container">
        <div class="flex flex-col md:flex-row items-center gap-8">
            <div class="w-full md:w-1/2">
                <img src="{{asset($page->findSection('garden-left-image'))}}" class="w-full h-auto" />
            </div>
            <div class="w-full md:w-1/2 md:pl-8 lg:pl-10">
                {!!$page->findSection('garden-right-content')!!}
            </div>
        </div>
    </div>
</section>
<section class="relative w-full sm:w-[90%] md:w-[85%] lg:w-[75%] mx-auto text-center px-4 sm:px-6">
    <div class="bg-gradient-to-b py-16 sm:py-20 px-6 sm:px-12 md:px-16 lg:px-32 xl:px-40 from-[#F4FFE1]/0 to-[#AABF86]/60 rounded-3xl relative overflow-hidden">
        <div class="container relative z-10">
            {!!$page->findSection('garden-free-seed-content')!!}
        </div>
        <img src="{{$page->findSection('garden-free-seed-image')}}" class="absolute right-[-8rem] sm:right-[-10rem] md:right-[-10.5rem] -bottom-16 sm:-bottom-20 w-32 sm:w-40 md:w-auto hidden sm:block opacity-80">
    </div>
</section>
<section class="py-16 sm:py-20 md:py-32 lg:py-20 px-4 sm:px-6 lg:px-10 relative">
    <div class="container">
        <div class="w-full sm:w-[80%] md:w-[70%] lg:w-[50%] mx-auto mb-12 md:mb-16 text-center">
            {!! $page->findSection('garden-features-heading') !!}
        </div>
        <div class="flex flex-col md:flex-row items-center gap-8">
            <div class="w-full md:w-1/2 flex justify-center">
                <img src="{{asset($page->findSection('garden-features-image'))}}" class="w-full max-w-md h-auto" />
            </div>
            <div class="w-full md:w-1/2">
                {!!$page->findSection('garden-features-text')!!}
            </div>
        </div>
    </div>
</section>
<section class="aboutMain py-16 sm:py-20 md:py-32 lg:py-20 relative">
    <div class="container px-4 sm:px-6">
        <div class="flex flex-col md:flex-row items-center gap-8">
            <div class="w-full md:w-1/2 px-4 sm:px-8 md:px-12 lg:px-20 xl:px-32 text-center md:text-left order-2 md:order-1">
                {!!$page->findSection('garden-profile-content')!!}
            </div>
            <div class="w-full md:w-1/2 order-1 md:order-2">
                <img src="{{asset($page->findSection('garden-profile-image'))}}" class="w-full h-auto" />
            </div>
        </div>
    </div>
</section>
<section class="py-16 sm:py-20 md:py-32 lg:py-20 relative w-full sm:w-[90%] md:w-[85%] lg:w-[75%] mx-auto px-4 sm:px-6">
    <div class="container">
        <div class="flex flex-col md:flex-row items-center gap-8">
            <div class="w-full md:w-1/2">
                <img src="{{asset($page->findSection('garden-community-image'))}}" class="w-full h-auto" />
            </div>
            <div class="w-full md:w-1/2 md:pl-8 lg:pl-10 text-center md:text-left">
                {!!$page->findSection('garden-community-content')!!}
            </div>
        </div>
    </div>
</section>
<section class="recipeSection py-16 sm:py-20 md:py-32 lg:py-20">
    <div class="flex items-center justify-center px-4 sm:px-6 lg:px-8">
        <div class="w-full sm:w-[90%] md:w-[80%] lg:w-1/2 text-center">
            {!!$page->findSection('grow-smarter')!!}
        </div>
    </div>
</section>
@endsection