@extends('layouts.app')
@section('title', 'Become A Seller')
@section('content')

<section class="relative about-banner">
    <div
        class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] md:px-20 md:pt-[8rem] md:pb-[8rem] w-[90%] mx-auto rounded-3xl">
        <div class="container">
            <div class="md:flex md:items-center md:justify-center">
                <h1 class="text-3xl md:text-6xl text-black font-extrabold relative max-[991px] text-center">Become A Seller On <br> Harvest Hub</h1>
            </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="aboutMain pt-[10rem] relative">
    <div class="container">

        <div class="flex items-center">
            <div class="w-1/2 relative ">
                <img src="{{asset($page->image)}}" />
                <img src="{{asset('front/images/glow1.webp')}}" class="absolute -bottom-10 left-[-10.5rem] z-[-1]" />

            </div>
            <div class="w-1/2">
                {!! $page->findSection('become-a-seller-description') !!}
                <a href="{{route('sell')}}"
                    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
                    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>
    <img src="{{asset('front/images/aboutRight.webp')}}" class="absolute right-0 -bottom-20" />
</section>

<section class="pt-[10rem] px-10 relative">
    <div class="container">
        <div class="w-[70%] mx-auto">
            <h2 class="text-center text-6xl text-black font-bold relative">{{$page->findSection('why-selling-heading')}}
                <img src="{{asset('front/images/shape2.webp')}}" class="my-5 float-right hidden md:block">
            </h2>
        </div>
        <div class="flex justify-center items-center w-[80%] mx-auto">
            <div class="grid grid-cols-3 gap-9 my-[3rem] w-fit">
                <div class="max-w-lg bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699]  p-10 rounded-[2.438rem] shadow-lg flex flex-col justify-center">
                    <figure class="flex justify-center">
                        <img src="{{asset($page->findSection('first-why-sell-icon'))}}" alt="">
                    </figure>

                   {!! $page->findSection('first-why-sell-content') !!}
                </div>
                <div class="max-w-lg bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699]  p-10 rounded-[2.438rem] shadow-lg flex flex-col justify-center">
                    <figure class="flex justify-center">
                        <img src="{{asset($page->findSection('second-why-sell-icon'))}}" alt="">
                    </figure>
                    {!! $page->findSection('second-why-sell-content') !!}
                </div>
                <div class="max-w-lg bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699]  p-10 rounded-[2.438rem] shadow-lg flex flex-col justify-center">
                    <figure class="flex justify-center">
                        <img src="{{asset($page->findSection('third-why-sell-icon'))}}" alt="">
                    </figure>
                    {!! $page->findSection('third-why-sell-content') !!}

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

    </div>
</section>
<section class="pt-[10rem] px-10 relative">
    <div class="container">
        <div class="w-[45%] mx-auto">
            <h2 class="text-center text-6xl text-black font-bold relative">{{$page->findSection('featured-design-heading')}}
                <br>
                <img src="{{asset('front/images/shape2.webp')}}" class="my-5  float-right">
            </h2>
        </div>
        <div class="flex justify-center items-center w-[80%] mx-auto">
            <div class="grid grid-cols-2 gap-9 my-[3rem] w-fit">
                @foreach ($feature_seller as $item)
                    
                <div class="grid grid-cols-2 gap-8">
                    <figure>
                        <img src="{{asset($item->image)}}" alt="">
                    </figure>
                    <div>
                        <h4 class="text-2xl text-black font-black font-futura relative">{{$item->name}}</h4>
                        {!! $item->description !!}
                    </div>
                </div>
                @endforeach
              
            </div>
        </div>

    </div>

</section>

<section class="pt-[10rem] px-10 relative">
    <div class="container">
        <div class="w-[70%] mx-auto">
            <h2 class="text-center text-6xl text-black font-bold relative">{{$page->findSection('how-it-works-heading')}}
                <img src="{{asset('front/images/shape2.webp')}}" class="my-5 ml-auto mr-40 hidden md:block">
            </h2>
        </div>
        <div class=" w-[80%] mx-auto">
            <div class="grid grid-cols-4 gap-9 my-[3rem] w-fit">
                <div class="relative">

                    <div class="rounded-[39px] bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699] p-5 w-fit mx-auto">
                        <img src="{{asset($page->findSection('how-first-image'))}}" alt="">
                    </div>
                    {!!$page->findSection('how-first-content')!!}
                    <img src="{{asset('front/images/arrow-1.webp')}}" class="absolute -right-20" alt="">

                </div>
                <div class="relative">
                    <img src="{{asset('front/images/arrow-2.webp')}}" class="absolute -top-10 -right-20" alt="">
                    <div class="rounded-[39px] bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699] p-5 w-fit mx-auto">
                        <img src="{{asset($page->findSection('how-second-image'))}}" alt="">
                    </div>
                    {!!$page->findSection('how-second-content')!!}
                </div>
                <div class="relative">

                    <div class="rounded-[39px] bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699] p-5 w-fit mx-auto">
                        <img src="{{asset($page->findSection('how-third-image'))}}" alt="">
                    </div>
                    {!!$page->findSection('how-third-content')!!}
                    <img src="{{asset('front/images/arrow-3.webp')}}" class="absolute -right-20" alt="">
                </div>

                <div>

                    <div class="rounded-[39px] bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699] p-5 w-fit mx-auto">
                        <img src="{{asset($page->findSection('how-fourth-image'))}}" alt="">
                    </div>
                    {!!$page->findSection('how-fourth-content')!!}
                </div>


            </div>
            <div class="grid grid-cols-1 gap-9 my-[3rem] w-fit mx-auto">
                <a href="{{route('sell')}}"
                    class="group mx-auto 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
                    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>

<section class="pt-[10rem] px-10 relative">
    <div class="bg-gradient-to-b from-[#F4FFE100] to-[#AABF8699] w-[90%] mx-auto py-[5rem] rounded-[2.438rem]">
        <div class="container">
            <div class="w-[60%] mx-auto">
                <h2 class="text-center text-6xl text-black font-bold relative">{{$page->findSection('seller-plan-heading')}}
                    <img src="{{asset('front/images/shape2.webp')}}" class="my-5 ml-auto mr-40 hidden md:block">
                </h2>
            </div>
            <div class="w-[80%] mx-auto">
               <div class="grid grid-cols-4 gap-9 my-[3rem] w-fit items-end">
                  {!! $page->findSection('seller-plan') !!}


                </div>
            </div>

        </div>

    </div>
</section>


<section class="pt-[10rem] relative w-[75%] mx-auto">
    <div class="container">
        <div class="flex items-center">
            <div class="w-1/2 p-5">
                <img src="{{asset($page->findSection('movement-left-image'))}}" />
            </div>
            <div class="w-1/2 pl-10">
                {!!$page->findSection('movement-content')!!}

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

<section class="recipeSection py-[10rem]">
    <div class="flex items-center justify-center">
        <div class="w-1/2 text-center">
            <h2 class="text-6xl text-black font-bold relative">Ready to Grow Your Business?
                <img src="{{asset('front/images/shape6.webp')}}" class="my-5 mx-auto hidden md:block" />
            </h2>
            {!! $page->findSection('grow-content') !!}
            <a href="{{route('sell')}}"
                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 my-5">Join Us 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 class="imgBox flex gap-5 mt-5 justify-center">
                <a href="#!"><img src="{{asset('front/images/apple-btn.webp')}}"></a>
                <a href="#!"><img src="{{asset('front/images/google-btn.webp')}}"></a>
            </div>

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


@endsection