@extends('layouts.app')
@section('title', 'Sell')
@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="flex items-center justify-center">
                <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-extrabold text-center leading-tight">Sell</h1>
            </div>
        </div>
    </div>
    <img src="{{ asset('front/images/sell-left.webp') }}" class="absolute -bottom-8 sm:-bottom-12 h-3/4 sm:h-[87.5%] right-4 sm:right-[4.5rem] object-contain hidden md:block" />
    <img src="{{ asset('front/images/sell-right.webp') }}" class="absolute -bottom-8 sm:-bottom-12 h-3/4 sm:h-[87.5%] left-4 sm:left-[6.5rem] object-contain hidden md:block" />
</section>
<section class="streamSection relative py-16 sm:py-20 md:py-32 lg:py-40 px-4 sm:px-6 lg:px-8">
    <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 md:justify-start order-2 md:order-1">
            <img src="{{asset($page->image)}}" class="w-full max-w-md md:max-w-[45%] lg:absolute lg:left-0 lg:w-[45%] lg:top-[50%] lg:-translate-y-[50%] h-auto" />
        </div>
        <div class="w-full md:w-1/2 md:pr-20 lg:pr-40 text-center md:text-left order-1 md:order-2">
            <h2 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-black font-bold relative mb-6">
                {{ $page->findSection('seller-heading') }}
                <img src="{{ asset('front/images/shape5.webp') }}" class="my-5 hidden md:block" />
            </h2>
            <div class="pgMain">
                {!! $page->findSection('seller-description') !!}
                <a href="{{route('register.as.seller')}}"
                    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>

<section class="w-full sm:w-[95%] md:w-[90%] mx-auto py-16 sm:py-20 md:py-32">
    <div class="container px-4 sm:px-6">
        <div class="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12">
            <div class="w-full md:w-1/2 text-center md:text-left">
                {!! $page->findSection('start-selling-content') !!}
                <a href="{{route('register.as.seller')}}"
                    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 class="w-full md:w-1/2 flex justify-center">
                <figure class="relative max-w-md md:max-w-lg">
                    <img src="{{asset($page->findSection('start-selling-image'))}}" class="relative z-10 w-full h-auto">
                    <img src="{{asset('front/images/glow.webp')}}" class="absolute top-1/2 left-1/2 -translate-x-[65%] -translate-y-1/2 z-[-1] w-full h-auto opacity-80">
                </figure>
            </div>
        </div>
    </div>
</section>
@include('layouts.components.faqs')

@endsection