@extends('theme::layouts.app')

@section('content')

    <div class="relative flex items-center w-full text-black custom-gradient">
        <div class="relative z-20 px-8 mx-auto xl:px-5 custom-max-width">
            <div
                class="flex flex-col items-center h-full pt-4 md:pt-8 lg:pt-16 xl:pt-24 pb-8 md:pb-16 lg:pb-24 xl:pb-32 lg:flex-row">
                <div
                    class="flex flex-col items-start w-full mb-16 md:items-center lg:pr-12 lg:items-start lg:w-1/2 lg:mb-0"
                >
                    <h1
                        class="invisible text-xl font-bold leading-10 tracking-tight transition-none duration-700 ease-out delay-150 transform translate-y-12 opacity-0 bg-clip-text scale-10 md:mb-12 sm:leading-none md:text-5xl lg:text-7xl xl:text-8xl"
                        data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "scale-110": "scale-100", "opacity-0": "opacity-100" }'
                    >
                        {{ theme('home_subheadline') }}
                    </h1>
                    <p
                        class="invisible max-w-2xl text-base text-left text-gray-600 transition-none duration-700 ease-out delay-300 transform translate-y-12 opacity-0 md:text-center lg:text-left sm:text-base lg:text-lg xl:text-xl"
                        data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "scale-110": "scale-100", "opacity-0": "opacity-100" }'
                    >
                        {{ theme('home_description') }}
                    </p>
                    <div
                        class="invisible w-full mt-8 transition-none duration-700 ease-out transform translate-y-12 opacity-0 delay-450 sm:mt-12 sm:flex sm:justify-center lg:justify-start sm:w-auto"
                        data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-y-12": "translate-y-0", "opacity-0": "opacity-100" }'
                    >
                        <div class="mt-3 sm:mt-0">
                            <a
                                href="#"
                                class="availability-button px-8 py-3 text-base font-medium leading-6 transition duration-150 ease-in-out bg-white border-2 border-black rounded-md hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10"
                            >
                                {{__("Check availability")}}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="flex w-full mb-0 lg:w-1/2">
                    <div
                        class="relative invisible transition-none duration-1000 delay-100 transform translate-x-12 opacity-0"
                        data-replace='{ "transition-none": "transition-all", "invisible": "visible", "translate-x-12": "translate-y-0", "opacity-0": "opacity-100" }'
                    >
                        <img
                            src="{{ Voyager::image(theme('home_promo_image')) }}"
                            alt="{{__("Home Promo Image")}}"
                            class="w-full max-w-3xl sm:w-auto"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="home-bottom-path hidden xl:flex">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 1000 100"
                preserveAspectRatio="none"
            >
                <path
                    class="origin-center fill-white	rotate-0"
                    d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"
                >
                </path>
            </svg>
            <div class="absolute top-0 min-h-[52%] min-w-full bg-white"></div>
        </div>
    </div>
    <div
        class="relative w-full py-8 md:py-16 lg:py-24 xl:py-32 xl:-mt-24 text-black"
    >
        <div
            class="custom-max-width z-20 flex flex-col items-center justify-start gap-20 px-8 mx-auto xl:px-5"
        >
            <h2 class="w-full md:w-1/2 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl leading=[50px] font-bold">
                {{__("Ultimate method & amazing features to change your life")}}
            </h2>
            <div
                class="grid gap-y-10 sm:grid-cols-1 sm:gap-x-8 md:gap-x-12 lg:grid-cols-3 xl:grid-cols-3 lg:gap-20"
            >
                @foreach(config('achievements') as $achievement)
                    <div class="flex flex-row items-center gap-2.5">
                        <img
                            src="{{ $achievement->image }}"
                            alt="{{__("Achievement Image")}}"
                            class="w-min h-min rounded sm:mx-auto"
                        >
                        <div class="flex flex-col">
                            <h3 class="text-xl md:text-2xl font-semibold leading-tight">{{ $achievement->title }}</h3>
                            <p class="text-lg">{{ $achievement->description }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div
        id="testimonials"
        class="bg-transparent custom-gradient mx-4 py-8 md:py-16 lg:py-24 xl:py-32 text-black"
    >
        <div class="custom-max-width mx-auto flex flex-col gap-12 md:gap-16 lg:gap-24 xl:gap-36">
            <div class="flex flex-col lg:flex-row gap-16 items-center justify-center">
                <img
                    src="/themes/tailwind/images/home/customization-section-image.png"
                    alt="{{__("Customization Image")}}"
                    class=""
                />
                <div class="flex flex-col gap-14">
                    <h2 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-bold leading-normal md:leading=[70px]">
                        {{__("Customize your free page in minutes")}}
                    </h2>
                    <span class="text-xl">
                        {{__("Connect your TikTok, Instagram, Twitter, website, store, video, music, podcast, events and more.
                        It all comes together in a link in bio landing page designed to convert.")}}
                    </span>
                    <div>
                        <a
                            href="#"
                            class="availability-button px-8 py-3 text-base font-medium leading-6 transition duration-150 ease-in-out bg-white border-2 border-black rounded-md hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10"
                        >
                            {{__("Get started for free")}}
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex flex-col lg:flex-row gap-16 items-center justify-center">
                <div class="flex flex-col gap-14">
                    <h2 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl font-bold leading-normal md:leading-[70px]">
                        {{__("More Traffic. More Clicks. More Tools.")}}
                    </h2>
                    <span class="text-xl">
                        {{ __("Measure, optimize, repeat. See the MEEEK data flow into Analytics, so you can measure click and see which content is driving revenue to your business.")  }}
                    </span>
                    <div>
                        <a
                            href="#"
                            class="availability-button px-8 py-3 text-base font-medium leading-6 transition duration-150 ease-in-out bg-white border-2 border-black rounded-md hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10"
                        >
                            {{__("Drive more traffic")}}
                        </a>
                    </div>
                </div>
                <img
                    src="/themes/tailwind/images/home/traffic-section-image.png"
                    alt="{{__("Customization Image")}}"
                    class=""
                />
            </div>
        </div>
    </div>
    <ul class="bg-[#231F20] px-16 py-8 text-base md:text-xl lg:text-2xl text-white font-bold flex flex-col md:flex-row justify-between uppercase">
        <li class="flex flex-row gap-4 items-center">
            <img
                src="/themes/tailwind/images/home/sun-icon.png"
                alt="{{__("Sun Icon")}}"
                class="w-min h-min"
            />
            <span>{{__("Analyze your audience")}}</span>
        </li>
        <li class="flex flex-row gap-4 items-center">
            <img
                src="/themes/tailwind/images/home/sun-icon.png"
                alt="{{__("Sun Icon")}}"
                class="w-min h-min"
            />
            <span>{{__("Keep your followers engaged")}}</span>
        </li>
        <li class="flex flex-row gap-4 items-center">
            <img
                src="/themes/tailwind/images/home/sun-icon.png"
                alt="{{__("Sun Icon")}}"
                class="w-min h-min"
            />
            <span>{{__("Making money on social")}}</span>
        </li>
        <li class="flex flex-row gap-4 items-center">
            <img
                src="/themes/tailwind/images/home/sun-icon.png"
                alt="{{__("Sun Icon")}}"
                class="w-min h-min"
            />
            <span>{{__("Standout with unique design")}}</span>
        </li>
    </ul>
    <div id="features" class="bg-white py-8 md:py-16 lg:py-24 xl:py-32 mx-4 text-black">
        <div class="custom-max-width mx-auto flex flex-col gap-12 items-center text-center">
            <h2 class="w-[80%] md:w-[49%] text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold leading-normal md:leading-[60px]">
                {{__("More than a link in bio page. A complete creators' software")}}
            </h2>
            <div
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5"
            >
                @foreach(config('features') as $feature)
                    <div
                        class="flex flex-col gap-4 items-center text-center py-12 px-7 border-2 border-black rounded-3xl shadow-[5px_5px_1px_1px_#000000]"
                    >
                        <img
                            src="{{$feature->image}}"
                            alt="{{__("Feature Image")}}"
                            class=""
                        />
                        <h3 class="text-2xl font-semibold">{{$feature->title}}</h3>
                        <span class="text-lg">{{$feature->description}}</span>
                    </div>
                @endforeach
            </div>
            <div class="flex flex-row gap-0 md:gap-4 items-center">
                <img
                    src="/themes/tailwind/images/home/check-circle-icon.png"
                    alt="{{__('Check Icon')}}"
                    class=""
                />
                <span class="text-xl font-medium">{{__("This team is adding new features as we speak!")}}</span>
            </div>
        </div>
    </div>
    <div class="bg-transparent custom-gradient py-8 md:py-16 lg:py-24 xl:py-32 mx-4 text-black">
        <div class="custom-max-width mx-auto flex flex-col gap-12 items-center">
            <h2 class="w-full md:w-1/2 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold leading-normal md:leading-[60px]">
                {{__("Most of our satisfied clients leave their feedback")}}
            </h2>
            <div class="flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16">
                <img
                    src="/themes/tailwind/images/home/feedback-section-image.png"
                    alt="{{__('Feedback Image')}}"
                    class=""
                />
                <div class="flex flex-col gap-12">
                    <div class="flex flex-col gap-6">
                        <img
                            src="/themes/tailwind/images/home/quote-icon.png"
                            alt="{{__('Quote Icon')}}"
                            class="w-16 md:w-20"
                        />
                        <h2 class="text-xl md:text-2xl leading-7 font-semibold">
                            {{__("They're probably one of the easiest vendors I've ever worked with in the digital space. They
                            have our best interests in mind. The team went the extra mile in negotiating costs and
                            delivering within a flexible scope. They're customer focused and strong in terms of
                            development
                            quality.")}}
                        </h2>
                    </div>
                    <div class="flex flex-col gap-4">
                        <h2 class="text-xl md:text-2xl font-semibold leading-10">{{__("Damian J. Hamza")}}</h2>
                        <span class="text-lg md:text-xl text-gray">{{__("Senior Digital Marketing Manager, MEEEK")}}</span>
                    </div>
                    <div>
                        <a
                            href="#"
                            class="availability-button px-8 py-3 text-base font-medium leading-6 transition duration-150 ease-in-out bg-white border-2 border-black rounded-md hover:bg-indigo-50 focus:outline-none focus:shadow-outline-indigo md:py-4 md:text-lg md:px-10"
                        >
                            {{__("Read more reviews")}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if(config('myconfig.ENABLE_PLANS'))
        <div id="pricing" class="bg-white py-8 md:py-16 lg:py-24 xl:py-32 mx-4 text-black">
            <div class="custom-max-width mx-auto flex flex-col gap-8 items-center text-center">
                <h2 class="w-full md:w-1/2 text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold leading-normal md:leading-[60px]">
                    {{__("Pick your plan and let's build your new social site")}}
                </h2>
                @include('theme::partials.plans', ['type'=>'home'])
            </div>
        </div>
    @endif
    <div class="bg-transparent custom-gradient py-8 md:py-16 lg:py-24 xl:py-32 mx-4 text-black">
        <div class="custom-max-width mx-auto flex flex-col gap-12 items-center">
            <h2 class="text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold leading-normal md:leading-[60px]">
                {{__("Frequently asked questions")}}
            </h2>
            <div class="max-w-full md:max-w-[70%] bg-white border-2 border-black shadow-[5px_5px_1px_1px_#000000]">
                @foreach(config('faq') as $faq)
                    <div class="flex flex-col gap-8 p-6">
                        <h3 class="text-xl md:text-2xl font-bold">Q. {{$faq->question}}</h3>
                        <p class="text-gray">{{$faq->response}}</p>
                    </div>
                    <hr class="border-[1.5px] border-black"/>
                @endforeach
            </div>
        </div>
    </div>

@endsection