@section('metas') 

    <title>MorePaws Perks - Pricing </title>
    <meta name="description" content="Pricing Description">
    <meta name="keywords" content="MorePaws pricing, MorePaws perks registration, MorePaws perks sign-up">

@endsection

<x-app-layout>

<div class="overflow-hidden w-full relative">
    <section class="h-auto py-11 md:py-20 xl:py-4 xl:h-[640px] bg-lightgreen overflow-hidden">
    <!-- <section class="h-auto pt-16 lg:pt-[100px] xl:pt-0 xl:h-[calc(100vh_-_96px)] xl:min-h-[680px] xxl:min-h-[720px] xxxl:h-[calc(100vh_-_96px)] w-full bg-lightgreen overflow-hidden"> -->
        <div class="w-full max-w-[1580px] px-[20px] md:px-[25px] mx-auto relative h-full">
            <div class="max-w-full w-[700px] h-full mx-auto text-center flex justify-center items-center">
                <div class="text-center w-full">
                    <h1 class="font-bold text-[28px] ssm:text-[36px] lg:!text-[46px] xl:!text-[50px] !leading-[125%] md:!leading-[140%] mb-4">Get <span class="text-maingreen">1 month free</span> with all premium features</h1>
                    <p class=" text-maingray text-base sm:text-lg lg:text-xl !leading-relaxed mb-0">£3.50/month after free trial. Cancel anytime.</p>
                </div>
            </div>
        </div>
    </section>

    @livewire('pricing.plans', ['user' => $user], key($user->id))

</div>
</x-app-layout>