{% extends "base.html" %} {% block title %}{% trans %} HTTP ERROR 404{% endtrans %}{% endblock %}

{% block extra_head %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
    <div class="text-center max-w-lg mx-auto">
        <div class="inline-flex items-center justify-center w-24 h-24 rounded-3xl bg-gradient-to-br from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 mb-8">
            <span class="text-4xl font-extrabold bg-gradient-to-r from-primary to-secondary dark:from-primary-light dark:to-secondary-light bg-clip-text text-transparent">404</span>
        </div>
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">{% trans %}We are sorry, the page you requested cannot be found.{% endtrans %}</h2>
        <p class="text-gray-500 dark:text-gray-400 mb-4">{% trans %}The URL may be misspelled or the page you're looking for is no longer available.{% endtrans %}</p>
        <p class="text-gray-500 dark:text-gray-400 mb-8">
            {% trans homepage_url=full_url('/') %}You can <a href="{{ homepage_url }}" class="text-primary dark:text-primary-light hover:underline">go back to our homepage</a>.{% endtrans %}
            {% trans %}Or write us an e-mail to{% endtrans %} <a href="mailto:time2help@onlineconvert.cc" class="text-primary dark:text-primary-light hover:underline" rel="nofollow">time2help@onlineconvert.cc</a>.
        </p>
        <a href="{{ full_url('/') }}" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl hover:shadow-accent/40 transition-all duration-300">
            <i class="fa fa-arrow-left"></i> {% trans %}Go back{% endtrans %}
        </a>
    </div>
</div>
{% endblock %}