Build Your Way with WavyKits

Components

<section class="py-20 px-4 text-center" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
        <div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" 
             class="transition-all duration-1000 ease-out max-w-md mx-auto">
            <!-- Error Code -->
            <div class="text-9xl font-bold text-blue-600 dark:text-blue-400 mb-4">
                404
            </div>
        <!-- Title -->
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
            Page Not Found
        </h1>
        
        <!-- Description -->
        <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
            Sorry, we couldn't find the page you're looking for.
        </p>
        
        <!-- Action Button -->
        <a href="/" class="inline-block px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
            Go back home
        </a>
    </div>
</section>