@extends('frontend.layouts.app')

@section('title', 'Page Not Found')

@section('content')
    <div class="bg-gray-100 flex items-center justify-center py-16 px-4">
        <div class="container mx-auto max-w-4xl text-center">
            <div class="bg-white rounded-lg shadow-xl p-8 md:p-12">
                <h1 class="text-8xl font-extrabold text-blue-600 tracking-wider">404</h1>
                <h2 class="text-3xl font-bold text-gray-800 mt-4 mb-2">Page Not Found</h2>
                <p class="text-gray-600 mb-8 text-lg">We're sorry, but the page you were looking for doesn't exist.</p>
                <a href="{{ route('home') }}" class="inline-block bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
                    Go to Homepage
                </a>
            </div>
        </div>
    </div>
@endsection