@section('title'){{ $title.' | Zemail.me' }}@endsection
@section('description'){{ $description }}@endsection
@section('keywords'){{ $keywords }}@endsection
@section('custom_header')
    @if (!empty($faqSchema))
    <script type="application/ld+json">
        {!! json_encode($faqSchema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
    </script>
   @endif
@endsection
<span>
<div class="container">
@if($route == "disposable-email")
    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Free Disposable Email Service</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Protect your privacy online with our <strong>disposable email</strong> solution. Create a <strong>temporary disposable email address</strong> instantly—no sign-up required. Stay anonymous and secure while avoiding spam and unwanted emails.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Secure Disposable Email</p>
                            <p class="font-md text-slate-500">
                                Our <strong>disposable email service</strong> is built for privacy. Messages are automatically deleted after 24 hours, helping you stay secure without leaving a trace.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Disposable Email Address</p>
                            <p class="font-md text-slate-500">
                                Generate a <strong>free disposable email address</strong> instantly. Use it to sign up for websites, receive confirmation emails, or test services—then let it disappear when you're done.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Fast & Anonymous Disposable Email</p>
                            <p class="font-md text-slate-500">Our <strong>anonymous disposable email service</strong> delivers messages instantly without asking for any personal data. Stay safe from spam and protect your main inbox at all times.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@elseif($route == "disposable-gmail")
    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Free Disposable Gmail Email Address</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Instantly generate a <strong>disposable Gmail email address</strong> to protect your privacy. Use a <strong>temporary Gmail inbox</strong> for sign-ups, testing, and avoiding spam.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Secure Disposable Gmail Email</p>
                            <p class="font-md text-slate-500">
                                Our <strong>disposable Gmail email</strong> is automatically deleted after 24 hours. Keep your personal inbox clean while remaining anonymous and protected online.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Gmail Disposable Email</p>
                            <p class="font-md text-slate-500">
                                Get a <strong>Gmail disposable email address</strong> instantly. No sign-up required—perfect for temporary use, testing, or online verifications as it comes with trusted domain.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Temporary Gmail Inbox</p>
                            <p class="font-md text-slate-500">Access your <strong>temporary Gmail inbox</strong> in seconds. Perfect for quick tasks without revealing your real Gmail account. Stay spam-free and private.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@elseif($route == "disposable-outlook")

    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Free Disposable Outlook Email Address</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Get a <strong>disposable Outlook email address</strong> instantly. Use a <strong>temporary Outlook inbox</strong> to stay anonymous, avoid spam, and protect your real Outlook account.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Secure Disposable Outlook Email</p>
                            <p class="font-md text-slate-500">
                                Our <strong>temporary Outlook email</strong> is private, secure, and deleted after 24 hours. Use it to prevent spam and shield your main Outlook inbox.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Outlook Disposable Email</p>
                            <p class="font-md text-slate-500">
                                Create a <strong>disposable Outlook email address</strong> on the fly—no login or personal details required. Perfect for quick verifications and one-time use.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Temporary Outlook Inbox</p>
                            <p class="font-md text-slate-500">Access a <strong>temporary Outlook-style inbox</strong> in seconds. Read messages instantly and stay free from long-term clutter and marketing emails.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@elseif($route == "disposable-yahoo")
    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Free Disposable Yahoo Mail Address</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Instantly get a <strong>disposable Yahoo Mail address</strong> to stay private online. Use a <strong>temporary Yahoo Mail inbox</strong> to block spam, protect your data, and avoid clutter.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Secure Yahoo Mail Disposable Email</p>
                            <p class="font-md text-slate-500">
                                A <strong>Yahoo Mail disposable email address</strong> lets you protect your personal inbox. All emails are deleted automatically after 24 hours to ensure privacy.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Disposable Yahoo Email</p>
                            <p class="font-md text-slate-500">
                                Create a <strong>temporary Yahoo inbox</strong> with no sign-up or login required. Ideal for quick signups, app testing, or filtering out unwanted messages.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Temporary Yahoo Mail Inbox</p>
                            <p class="font-md text-slate-500">Access a fast and reliable <strong>disposable Yahoo-style inbox</strong>. Avoid long-term clutter and use it just for what you need—then walk away spam-free.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@elseif($route == "gmailnator")
    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Gmailnator – Free Disposable Gmail Email Address</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Use <strong>Gmailnator</strong> to instantly get a <strong>temporary Gmail email address</strong> for sign-ups, testing, or spam control. No registration. Just quick, secure, disposable Gmail inboxes.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Gmailnator Disposable Gmail Generator</p>
                            <p class="font-md text-slate-500">
                                Use <strong>Gmailnator</strong> to receive emails online with a throwaway Gmail address. Every inbox is temporary, private, and refreshed regularly—ideal for testing or avoiding spam.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Gmailnator Temp Mail</p>
                            <p class="font-md text-slate-500">
                                Get your <strong>Gmailnator temp mail</strong> address in seconds. Emails arrive instantly ensuring your real email stays clean. Use for verification, app signups, or anything where you don’t want to use your personal Gmail.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Free Gmailnator Inbox for One-Time Use</p>
                            <p class="font-md text-slate-500">Your <strong>Gmailnator inbox</strong> is deleted after a short time. No inbox bloat. No trackers. Just clean, fast Gmail temp addresses that keep your identity safe.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@elseif($route == "emailnator")
    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Emailnator – Free Temp Gmail Email Generator</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Use <strong>Emailnator</strong> to generate a <strong>disposable email address</strong> instantly. No registration. No spam. Just quick, secure inboxes that work for signups, verifications, and more.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Emailnator Disposable Mailbox</p>
                            <p class="font-md text-slate-500">
                                <strong>Emailnator</strong> gives you quick access to <strong>one-time use email addresses</strong> with zero tracking. Ideal for keeping your personal inbox spam-free and secure.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Get Emailnator Temp Mail Now</p>
                            <p class="font-md text-slate-500">
                                Receive emails online using <strong>Emailnator temp mail</strong> – instant inboxes that refresh frequently, perfect for one-time verifications or testing services.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Clean Temporary Inboxes</p>
                            <p class="font-md text-slate-500">Enjoy a clutter-free inbox with <strong>Emailnator</strong>. No ads. No sign-up. Just fast, disposable email solutions that protect your real identity.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

@elseif($route == "temp-gmail")
    <div class="flex justify-center items-center py-3">
        <div class="flex items-center">
            <div class="group relative mx-auto w-full overflow-hidden rounded-[16px]">
                <div class="relative rounded-[15px] p-6">
                    <div class="space-y-2 w-full flex flex-col items-center text-center">
                        <div id="hero-section" class="relative self-center" >
                            <svg class="h-56 w-56" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1035 832" >
                                <path opacity=".1" d="M601 95c-66-2-129-20-189-39S291 15 227 4c-42-6-90-7-123 11S61 64 55 93c-4 21-6 44 5 64 8 14 23 26 33 39 34 47 10 105-28 150-17 22-37 42-51 65s-19 49-8 72c12 23 40 40 70 53 61 24 133 31 203 35 156 9 313 5 469 1 57-1 115-2 172-10 32-4 64-10 87-26 29-20 36-54 17-80-33-42-123-52-146-98-13-25 0-52 19-76 39-49 105-93 108-149 2-39-29-78-78-97-51-19-122-17-160 15-39 33-107 46-166 44ZM514.5 831.6c160.604 0 290.8-13.118 290.8-29.3 0-16.182-130.196-29.3-290.8-29.3s-290.8 13.118-290.8 29.3c0 16.182 130.196 29.3 290.8 29.3Z" fill="#F14743"  style="transform: translate3d(0px, 11.4579px, 0px);"></path><path d="M249 799s-13-73-61-109c-20-15-35-36-42-60l-5-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.8015px, 0px);"></path>
                                <path d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#F14743"  style="transform: translate3d(0px, 8.66419px, 0px);"></path><path opacity=".25" d="M111 573c4 8 30 24 30 24s4-30 0-37c-4-8-14-12-23-8s-11 14-7 21Zm-3 55c8 5 39 4 39 4s-14-26-22-31-18-2-22 5-3 18 5 22Zm39 74c10 0 37-16 37-16s-27-16-36-16-17 7-17 16 7 16 16 16Zm43 49c9 2 39-9 39-9s-23-20-33-22-17 4-19 13 4 17 13 18Zm-10-132c-3 8-28 27-28 27s-7-29-3-38 12-12 21-9 13 12 10 20Zm49 59c-5 7-35 17-35 17s3-30 9-36c6-7 16-9 23-3 7 4 9 14 4 21l-1 1Zm40 63c-4 7-31 23-31 23s-3-30 2-38 14-11 22-7 12 14 7 22Z" fill="#000"  style="transform: translate3d(0px, 9.40631px, 0px);"></path>
                                <path d="M247 797s20-72-9-123c-11-22-16-46-12-70 2-12 5-23 10-34" stroke="#535461" stroke-width="2" stroke-miterlimit="10"  style="transform: translate3d(0px, 10.1179px, 0px);"></path>
                                <path d="M218 538c0 9 18 33 18 33s16-25 15-34-8-16-17-15-16 7-16 16Zm-26 49c5 7 34 19 34 19s-1-30-7-37c-5-7-15-9-23-4a15.005 15.005 0 0 0-6.919 10.106A14.99 14.99 0 0 0 192 587Zm4 83c9 3 40-1 40-1s-17-25-26-28-18 0-22 7 0 18 8 22Zm18 61c8 5 39 7 39 7s-12-28-20-33-18-3-23 4-4 17 3 22h1Zm47-124c-6 6-37 13-37 13s7-29 13-35c7-7 17-7 24-1 6 6 7 15 1 22l-1 1Zm21 72c-9 4-40 2-40 2s15-26 23-30 19-1 23 6c5 8 2 18-6 22Zm9 73c-7 5-39 9-39 9s11-29 18-34 18-4 24 3a15 15 0 0 1-3 22Z" fill="#F14743"  style="transform: translate3d(0px, 7.94676px, 0px);"></path><path d="M579 214 317 384l171 308c1 3 4 5 7 6l155 37c5 2 11-1 13-6l77-160 84-112-199-236a35 35 0 0 0-46-7Z" fill="#DCDFED"  style="transform: translate3d(0px, 5.38356px, 0px);"></path>
                                <path opacity=".1" d="m827 459-1 1-49 65-1 2-33 44-66 136-2 4-9 19c-2 5-8 8-13 7l-155-38c-3-1-6-3-8-6l-15-27-2-4-107-194-1-2-45-81 5-3 41-27h1l87-56 5-4 122-79c15-10 35-7 46 7l91 107 4 5 67 78v1l33 39 4 5 1 1Z" fill="#000"  style="transform: translate3d(0px, 5.97558px, 0px);"></path>
                                <path opacity=".1" d="m786 412-8 56-2 17-2 36v3l-7 188a11.999 11.999 0 0 1-14 11l-78-17h-1l-200-45-4-1-110-24 3-169v-6l1-51v-57l87-56 6-3c80 8 187 24 259 35l4 5 66 78Z" fill="#000" ></path>
                                <path d="m795 346-9 66-9 60-2 17-2 36-7 191a11.999 11.999 0 0 1-14 11l-79-17-200-45-114-25 3-175 1-51 1-60v-62c19-1 50 1 87 5a5591.76 5591.76 0 0 1 344 49Z" fill="#F14743" ></path>
                                <path opacity=".1" d="m820 452-43 20-215 106-199-164-41-33-5 3 45 81-3 175 114 25 15 27c1 3 4 5 7 6l155 37c5 2 11-1 13-6l10-19 78 17c7 2 13-2 15-9v-2l7-191 50-67v-1l-3-5Z" fill="#000"  style="transform: translate3d(0px, 6.60105px, 0px);"></path>
                                <path d="m317 384-18 305c0 6 4 11 9 13l474 105a11.994 11.994 0 0 0 9.442-2.391A11.997 11.997 0 0 0 796 796l28-339-262 129-245-202Z" fill="#DCDFED"  style="transform: translate3d(0px, 7.25494px, 0px);"></path><path opacity=".1" d="m303 696 246-151c7-5 17-3 23 3l220 257c1 1 1 0 0 0L303 696c-2 1-2 0 0 0Z" fill="#000"  style="transform: translate3d(0px, 4.28594px, 0px);"></path>
                                <path d="m304 696 244-147c8-5 18-3 24 4l218 251v3l-2 1-483-107-2-3 1-2Z" fill="#E3E5F1"  style="transform: translate3d(0px, 4.81912px, 0px);"></path>
                            </svg>
                        </div>
                        <h1 class="text-2xl leading-9 tracking-tight text-gray-900 sm:text-2xl sm:leading-10 dark:text-gray-300" >Temp Gmail – Instant Temporary Gmail Address Generator</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Get a free <strong>Temp Gmail</strong> address without sign-up. Perfect for quick email verification, testing, or blocking spam. Fast, disposable Gmail inboxes made for privacy and ease.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex justify-center items-center mt-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">
            <!-- Card 1 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.shield-check/>
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Secure Temp Gmail Address</p>
                            <p class="font-md text-slate-500">
                                Create a <strong>temporary Gmail email address</strong> in seconds. <strong>Temp Gmail</strong> gives you a private inbox to use without sharing your real Gmail. Ideal for sensitive signups or testing.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-700">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.user />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Instant Gmail Inbox for One-Time Use</p>
                            <p class="font-md text-slate-500">
                                Use <strong>Temp Gmail</strong> to receive messages instantly online. No delays, no sign-ups — just a quick Gmail-based temp email for verifications or app logins.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="flex items-center">
                <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] hover:bg-gradient-to-r hover:from-zinc-700 hover:via-zinc-800 hover:to-zinc-600">
                    <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                    <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                        <div class="space-y-4">
                            <flux:icon.clock />
                            <p class="text-lg font-semibold dark:text-white text-accent-content">Avoid Spam with Temp Gmail</p>
                            <p class="font-md text-slate-500">Keep your personal Gmail clutter-free. <strong>Temp Gmail</strong> lets you handle signups, downloads, or demo access using a disposable Gmail address that vanishes when you're done.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


@endif
@if($faqs)
    <div class="mt-10 mb-3 w-full  lg:max-w-2xl dark:text-white text-accent-content justify-self-center text-center text-xl" size="xl">
            <p>----- Frequently Asked Questions -----</p>
        </div>

    <div class="mb-3"></div>
    <div class="justify-center items-center py-3">
            @foreach($faqs as $index => $faq)
            <details
                class="group border-s-4 border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900 [&_summary::-webkit-details-marker]:hidden"
                open
            >
                    <summary class="flex items-center justify-between gap-1.5 text-gray-900 dark:text-white">
                        <h2 class="text-lg text-gray-700  dark:text-gray-300 font-medium">{{ $faq['title'] }}</h2>

                        <svg
                            class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </summary>

                    <p class="pt-4 text-slate-500">
                        {{ $faq['content'] }}
                    </p>
                </details>
        @endforeach
        </div>
@endif


    <div class="mt-10 mb-3 w-full  lg:max-w-2xl dark:text-white text-accent-content justify-self-center text-center text-xl" size="xl">
        <p>----- Popular Articles -----</p>
    </div>

    <div class="mb-3"></div>
    <div class="flex justify-center items-center py-3">
        <div class="flex justify-center items-center">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-1">

                @foreach(collect(config('app.blogs'))->take(6) as $blog)
                    <a href="{{ route('blog', $blog['slug']) }}">
                        <div class="flex items-center">
                            <div class="group relative mx-auto w-96 overflow-hidden rounded-[16px] dark:bg-zinc-800 bg-zinc-200 p-[1px] ease-in-out hover:bg-gradient-to-r hover:from-zinc-600 hover:via-zinc-800 hover:to-zinc-700">
                                <div class="group-hover:animate-spin-slow invisible absolute -top-40 -bottom-40 left-10 right-10 bg-gradient-to-r from-transparent via-gray-600 to-transparent group-hover:visible"></div>
                                <div class="relative rounded-[15px] dark:bg-zinc-900 bg-zinc-100 dark:text-white text-accent-content p-6">
                                    <div class="space-y-4">
                                        <p class="font-md text-slate-500">
                                            <img src="{{ asset('storage/'.$blog['post_image']) }}" class="card-img-top" alt="{{ $blog['slug'] }}">
                                        </p>
                                        <p class="text-lg font-semibold dark:text-white text-accent-content truncate">{{ $blog['post'] }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>
</span>