@extends('frontend.layout.layout')
@section('title', '404 - Page Not Found')
@section('main')
     <main
            class="flex-grow flex items-center justify-center py-20 px-6 md:px-14 text-center"
        >
            <div class="max-w-2xl">
                <p
                    class="text-9xl font-extrabold text-primary mb-8 animate-pulse"
                >
                    404
                </p>
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                    Page Not Found
                </h1>
                <p class="text-lg md:text-xl text-gray-700 mb-8">
                    Oops! It looks like the page you're looking for doesn't
                    exist or has been moved. Don't worry, we can help you get
                    back on track.
                </p>
                <div
                    class="flex flex-col sm:flex-row items-center justify-center gap-4"
                >
                    <a
                        href="{{ route('home') }}"
                        class="bg-primary text-white px-8 py-4 !rounded-button text-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20"
                        >Go to Homepage</a
                    >
                    <a
                        href="{{ route('contact') }}"
                        class="border border-primary text-primary px-8 py-4 !rounded-button text-lg font-medium hover:bg-primary hover:text-white transition-colors"
                        >Contact Support</a
                    >
                </div>
            </div>
        </main>
@endsection