---
title: '404'
---
{{# Full-bleed hero — negative margin to escape <main> padding #}}
<section class="relative -mt-6 -mb-6 min-h-screen flex flex-col overflow-hidden"
         style="margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); background-image: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;">

    {{# Overlay — light enough to let the background show through #}}
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>

    {{# Decorative dot grid — reuses the hero-dots pattern from the site #}}
    <div class="hero-dots absolute inset-0 opacity-30"></div>

    {{# Content #}}
    <div class="relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-32 md:py-40">

        {{# ---- Large "404" with room-door styling ---- #}}
        <div class="relative mb-6" data-aos="fade-down" data-aos-duration="800">
            {{# The big number #}}
            <span class="block font-nunito text-[8rem] sm:text-[10rem] md:text-[12rem] font-extrabold leading-none tracking-tight select-none error-404-number">
                404
            </span>
            {{# Hanging door-sign icon centred over the zero #}}
            <span class="absolute top-2 left-1/2 -translate-x-1/2 text-[#ffc70a] text-2xl md:text-3xl opacity-80 animate-swing origin-top">
                <i class="fa-solid fa-door-open"></i>
            </span>
        </div>

        {{# ---- Copy ---- #}}
        <h1 class="font-nunito text-xl md:text-2xl font-bold text-white mb-2 text-center" data-aos="fade-up" data-aos-delay="100">
            {{ trans:messages.page_not_found }}
        </h1>
        <p class="text-white/60 text-base md:text-lg text-center max-w-md mb-10" data-aos="fade-up" data-aos-delay="200">
            {{ trans:messages.404_subtitle }}
        </p>

        {{# ---- Search bar ---- #}}
        <form action="{{ locale_path }}/search" method="GET"
              class="w-full max-w-lg mb-12"
              data-aos="fade-up" data-aos-delay="300">
            <label class="sr-only" for="search-404">{{ trans:messages.404_try_search }}</label>
            <div class="relative group">
                <input type="text" name="q" id="search-404"
                       placeholder="{{ trans:messages.404_try_search }}"
                       class="w-full pl-12 pr-5 py-3.5 rounded-lg bg-white/10 backdrop-blur-sm border border-white/15 text-white placeholder-white/40 text-sm
                              focus:outline-none focus:ring-2 focus:ring-[#ffc70a]/50 focus:border-[#ffc70a]/40
                              transition-all duration-300">
                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-white/30 group-focus-within:text-[#ffc70a] transition-colors"></i>
            </div>
        </form>

        {{# ---- Quick-nav cards ---- #}}
        <p class="text-white/40 text-xs uppercase tracking-widest font-nunito font-bold mb-5" data-aos="fade-up" data-aos-delay="350">
            {{ trans:messages.404_popular_pages }}
        </p>
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 w-full max-w-2xl mb-12" data-aos="fade-up" data-aos-delay="400">
            <a href="{{ locale_path }}/otelms-front-desk"
               class="group flex flex-col items-center gap-2 p-4 rounded-lg bg-white/5 border border-white/8 backdrop-blur-sm
                      hover:bg-white/10 hover:border-[#ffc70a]/30 transition-all duration-300">
                <i class="fa-solid fa-desktop text-lg text-[#ffc70a]/70 group-hover:text-[#ffc70a] transition-colors"></i>
                <span class="text-white/70 text-xs font-nunito font-semibold text-center group-hover:text-white transition-colors">{{ trans:messages.prod_front_desk }}</span>
            </a>
            <a href="{{ locale_path }}/channel-manager"
               class="group flex flex-col items-center gap-2 p-4 rounded-lg bg-white/5 border border-white/8 backdrop-blur-sm
                      hover:bg-white/10 hover:border-[#ffc70a]/30 transition-all duration-300">
                <i class="fa-solid fa-plug text-lg text-[#ffc70a]/70 group-hover:text-[#ffc70a] transition-colors"></i>
                <span class="text-white/70 text-xs font-nunito font-semibold text-center group-hover:text-white transition-colors">{{ trans:messages.prod_channel_manager }}</span>
            </a>
            <a href="{{ locale_path }}/booking"
               class="group flex flex-col items-center gap-2 p-4 rounded-lg bg-white/5 border border-white/8 backdrop-blur-sm
                      hover:bg-white/10 hover:border-[#ffc70a]/30 transition-all duration-300">
                <i class="fa-solid fa-calendar-check text-lg text-[#ffc70a]/70 group-hover:text-[#ffc70a] transition-colors"></i>
                <span class="text-white/70 text-xs font-nunito font-semibold text-center group-hover:text-white transition-colors">{{ trans:messages.prod_booking_engine }}</span>
            </a>
            <a href="https://wiki.otelms.com"
               class="group flex flex-col items-center gap-2 p-4 rounded-lg bg-white/5 border border-white/8 backdrop-blur-sm
                      hover:bg-white/10 hover:border-[#ffc70a]/30 transition-all duration-300">
                <i class="fa-solid fa-book text-lg text-[#ffc70a]/70 group-hover:text-[#ffc70a] transition-colors"></i>
                <span class="text-white/70 text-xs font-nunito font-semibold text-center group-hover:text-white transition-colors">{{ trans:messages.nav_knowledge_base }}</span>
            </a>
        </div>

        {{# ---- Home button ---- #}}
        <a href="{{ locale_path }}/"
           class="btn-glow inline-flex items-center gap-2 px-8 py-3.5 text-sm font-bold uppercase tracking-wider rounded
                  bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg"
           data-aos="fade-up" data-aos-delay="450">
            <i class="fa-solid fa-house text-xs"></i>
            {{ trans:messages.back_to_home }}
        </a>
    </div>
</section>

<style>
    /* Transparent number with gradient stroke effect */
    .error-404-number {
        color: transparent;
        -webkit-text-stroke: 2px rgba(255, 199, 10, 0.25);
        background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 0 60px rgba(255, 199, 10, 0.08));
    }

    /* Gentle swing for the door icon */
    @keyframes swing {
        0%, 100% { transform: translateX(-50%) rotate(0deg); }
        25% { transform: translateX(-50%) rotate(6deg); }
        75% { transform: translateX(-50%) rotate(-6deg); }
    }
    .animate-swing {
        animation: swing 3s ease-in-out infinite;
    }
</style>