<!DOCTYPE html>
<html lang="en" id="home">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<head>
    <title>OneUptime | Page not found</title>
    <meta name="description"
        content="The page you're looking for doesn't exist. Navigate back to OneUptime - the complete open-source observability platform.">
    <%- include('head', {
        enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
    }) -%>
</head>

<body>
    <%- include('nav') -%>

    <main class="relative isolate min-h-[80vh] flex items-center">
        <!-- Background pattern -->
        <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>

        <!-- Decorative gradient blobs -->
        <div class="absolute left-1/2 top-0 -z-10 -trangray-x-1/2 blur-3xl" aria-hidden="true">
            <div class="aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-gray-100 to-gray-100 opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
        </div>

        <div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
            <div class="mx-auto max-w-2xl text-center">
                <!-- Error code with animated gradient -->
                <div class="relative">
                    <span class="text-[10rem] sm:text-[14rem] font-bold leading-none tracking-tighter bg-gradient-to-br from-gray-200 via-gray-300 to-gray-200 bg-clip-text text-transparent select-none">
                        404
                    </span>
                    <!-- Decorative elements -->
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div class="h-32 w-32 rounded-full bg-gradient-to-br from-gray-500/10 to-gray-500/10 blur-2xl"></div>
                    </div>
                </div>

                <!-- Error message -->
                <div class="mt-4 sm:mt-6">
                    <h1 class="text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">
                        Page not found
                    </h1>
                    <p class="mt-4 text-base leading-7 text-gray-600 max-w-md mx-auto">
                        Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
                    </p>
                </div>

                <!-- Action buttons -->
                <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                    <a href="/"
                        class="inline-flex items-center justify-center rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:bg-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black">
                        <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                        </svg>
                        Go to homepage
                    </a>
                    <a href="/support"
                        class="inline-flex items-center justify-center rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-all hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">
                        Contact support
                        <svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                    </a>
                </div>
            </div>

            <!-- Quick links section -->
            <div class="mx-auto mt-20 max-w-3xl">
                <h2 class="text-center text-sm font-semibold text-gray-500 uppercase tracking-wide">Quick links</h2>
                <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <!-- Documentation -->
                    <a href="/docs" class="group relative rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200/60 transition-all hover:shadow-md hover:ring-gray-300">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 group-hover:bg-gray-200 transition-colors">
                            <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                            </svg>
                        </div>
                        <h3 class="mt-4 text-sm font-semibold text-gray-900">Documentation</h3>
                        <p class="mt-1 text-sm text-gray-500">Learn how to use OneUptime with our comprehensive guides.</p>
                        <span class="absolute inset-0" aria-hidden="true"></span>
                    </a>

                    <!-- Pricing -->
                    <a href="/pricing" class="group relative rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200/60 transition-all hover:shadow-md hover:ring-gray-300">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 group-hover:bg-gray-200 transition-colors">
                            <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                            </svg>
                        </div>
                        <h3 class="mt-4 text-sm font-semibold text-gray-900">Pricing</h3>
                        <p class="mt-1 text-sm text-gray-500">Start free and scale as you grow with flexible plans.</p>
                        <span class="absolute inset-0" aria-hidden="true"></span>
                    </a>

                    <!-- Enterprise -->
                    <a href="/enterprise/overview" class="group relative rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200/60 transition-all hover:shadow-md hover:ring-gray-300">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 group-hover:bg-gray-200 transition-colors">
                            <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" />
                            </svg>
                        </div>
                        <h3 class="mt-4 text-sm font-semibold text-gray-900">Enterprise</h3>
                        <p class="mt-1 text-sm text-gray-500">Advanced features for large-scale deployments.</p>
                        <span class="absolute inset-0" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        </div>
    </main>

    <%- include('footer') -%>

</body>

</html>
