ECommerce.Module/Components/Pages/NotFound.razor

@page "/404"
@page "/*"
@using Common

<!-- Hero Section -->
<div class="relative w-full h-80 rounded-2xl overflow-hidden shadow-2xl mb-12 mt-32 md:mt-36">
    <div class="absolute inset-0 bg-cover bg-center"
        style="background-image: url(https://img.daisyui.com/images/stock/photo-1505740420928-5e560c06d30e.webp);">
    </div>
    <div class="absolute inset-0 bg-black/50 backdrop-blur-[2px]"></div>
    <div class="relative z-10 h-full flex flex-col justify-center items-center text-center text-white py-16 px-6">
        <h1 class="text-7xl md:text-9xl font-black mb-4 tracking-tight">404</h1>
        <p class="text-lg md:text-xl text-gray-200 max-w-2xl">Page Not Found</p>
    </div>
</div>

<!-- Content -->
<div class="max-w-4xl mx-auto px-4 pb-20 text-center">

    <!-- Icon -->
    <div class="flex justify-center mb-8">
        <div class="relative">
            <div class="w-32 h-32 rounded-full bg-orange-500/10 border-2 border-orange-500/30 flex items-center justify-center animate-pulse">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <div class="absolute -top-2 -right-2 w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold shadow-lg shadow-orange-500/50">
                !
            </div>
        </div>
    </div>

    <!-- Message -->
    <h2 class="text-4xl font-black text-white mb-4">Oops! We Can't Find That Page</h2>
    <p class="text-xl text-white/70 mb-12 max-w-2xl mx-auto leading-relaxed">
        The page you're looking for might have been moved, deleted, or doesn't exist. Don't worry — let's get you back on track.
    </p>

    <!-- Search Box -->
    <div class="max-w-xl mx-auto mb-12">
        <div class="flex gap-2">
            <input type="text" placeholder="Search products..."
                class="flex-1 px-6 py-4 rounded-2xl border border-white/10 bg-base-100/50 text-white placeholder-white/40 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all" />
            <button class="btn bg-orange-600 hover:bg-orange-700 text-white border-orange-600 btn-lg shadow-xl shadow-orange-500/20">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </button>
        </div>
    </div>

    <!-- Quick Links -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
        <a href="/" class="group bg-base-100/50 backdrop-blur-sm rounded-2xl p-6 border border-orange-500/10 hover:border-orange-500/30 transition-all">
            <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">Home</h3>
            <p class="text-white/60 text-sm">Go back to the home page</p>
        </a>

        <a href="/shop" class="group bg-base-100/50 backdrop-blur-sm rounded-2xl p-6 border border-orange-500/10 hover:border-orange-500/30 transition-all">
            <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                </svg>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">Shop</h3>
            <p class="text-white/60 text-sm">Browse all our products</p>
        </a>

        <a href="/contact" class="group bg-base-100/50 backdrop-blur-sm rounded-2xl p-6 border border-orange-500/10 hover:border-orange-500/30 transition-all">
            <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
            </div>
            <h3 class="text-lg font-bold text-white mb-2">Contact</h3>
            <p class="text-white/60 text-sm">Get in touch with us</p>
        </a>
    </div>

    <!-- Primary CTA -->
    <div class="flex flex-wrap gap-4 justify-center">
        <a href="/" class="btn bg-orange-600 hover:bg-orange-700 text-white border-orange-600 btn-lg shadow-xl shadow-orange-500/20">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            Back to Home
        </a>
        <a href="/about" class="btn bg-orange-600/10 hover:bg-orange-600/20 text-orange-300 border-orange-600/30 btn-lg">
            Learn About Us
        </a>
    </div>

    <!-- Fun Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16 pt-12 border-t border-orange-500/10">
        <div>
            <div class="text-5xl font-black text-primary mb-2">10K+</div>
            <p class="text-white/70 text-sm font-semibold uppercase tracking-wider">Products Available</p>
        </div>
        <div>
            <div class="text-5xl font-black text-primary mb-2">24/7</div>
            <p class="text-white/70 text-sm font-semibold uppercase tracking-wider">Support Available</p>
        </div>
        <div>
            <div class="text-5xl font-black text-primary mb-2">99%</div>
            <p class="text-white/70 text-sm font-semibold uppercase tracking-wider">Customer Satisfaction</p>
        </div>
    </div>
</div>