spb/spinza

1import type { Metadata } from "next";2import Link from "next/link";3import { Compass } from "lucide-react";4import { Button } from "@/components/ui";5import { SpinzaWordmark } from "@/components/brand/logo";67export const metadata: Metadata = { title: "Page not found", robots: { index: false } };89export default function NotFound() {10  return (11    <div className="relative flex min-h-dvh flex-col items-center justify-center px-4 py-16 text-center">12      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_20%,rgba(201,169,97,0.12),transparent_55%)]" />13      <Link href="/" className="relative mb-10 focus-ring rounded-md" aria-label="Spinza home">14        <SpinzaWordmark />15      </Link>16      <div className="relative">17        <div className="mx-auto mb-6 grid h-16 w-16 place-items-center rounded-full metal text-accent-2">18          <Compass className="h-7 w-7" />19        </div>20        <div className="font-mono text-[12px] tracking-[0.3em] text-fg-4">404</div>21        <h1 className="mt-2 text-3xl font-semibold tracking-[-0.03em] sm:text-4xl">This reel doesn&apos;t exist.</h1>22        <p className="mx-auto mt-3 max-w-md text-[15px] text-fg-3">The page you were looking for has moved or was never here. Your credits and progress are unaffected.</p>23        <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">24          <Button href="/" size="lg">25            Back to the lobby26          </Button>27          <Button href="/games" variant="secondary" size="lg">28            Browse games29          </Button>30        </div>31      </div>32      <p className="relative mt-16 text-[12px] text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>33    </div>34  );35}36