{% extends "base.html" %}

{% block title %} Not Found {% endblock title %}

{% block head_extra %}
<link rel="preload" as="image" href="{{ get_url(path='assets/404.webp') | safe }}?v={{ get_hash(path='assets/404.webp') }}" type="image/webp" />
{% endblock head_extra %}

{% block content %}
<div class="flex flex-col items-center justify-center text-center min-h-[60vh] space-y-10">
    <h1 class="text-5xl md:text-7xl font-extrabold text-white drop-shadow-lg">
        404 Not Found
    </h1>
    <img src="{{ get_url(path='assets/404.webp') | safe }}?v={{ get_hash(path='assets/404.webp') }}" class="w-80 md:w-[36rem] rounded-2xl" alt="404 Image" />
    <a href="/" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow transition">
        Go Back Home
    </a>
</div>
{% endblock content %}