@section('description'){{ config('app.settings.app_description') }}@endsection
@section('keywords'){{ config('app.settings.app_keyword') }}@endsection
<div class="container">
    <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 Mail</h1>
                        <span class="text-center text-gray-700 lg:max-w-2xl dark:text-gray-400 text-lg">Protect your personal email address from spam, bots, phishing, and other online abuse with our free temporary disposable anonymous email service. No commitments, no risks—just secure, instant access to a temp email address.</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 Temporary Email</p>
                            <p class="font-md text-slate-500">
                                Any temp mail that you create on our website is valid for as long we support that domain. Just to ensure that our email inbox is clean we delete emails every 24 hours to ensure reliable usability to every user.
                            </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</p>
                            <p class="font-md text-slate-500">
                                It is also known by names like : tempmail, 10minutemail, throwaway email, fake-mail or trash-mail, gmailnator.com, emailnator.com. Your temp email address is ready for use instantly, putting you in control effortlessly.
                            </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 and Anonymous Email Service</p>
                            <p class="font-md text-slate-500">Experience fast message delivery without delays or restrictions. Zemail.me provides user with disposable gmail emails that can be used to avoid future spam and irrelevant marketing emails.</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <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>