feat: add styled 404 page matching landing page theme

2026-04-25 14:44:52 +08:00
parent d6dc701e3f
commit 20027ecc3d
1 changed files with 45 additions and 0 deletions
@@ -0,0 +1,45 @@
+"use client"
+
+import { motion } from "motion/react"
+import Link from "next/link"
+
+export default function NotFound() {
+  return (
+    <section className="w-dvw h-dvh flex flex-col items-center justify-center relative p-4">
+      <motion.h1
+        initial={{ opacity: 0, scale: 0.8 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="font-bold text-8xl md:text-9xl text-primary"
+      >
+        404
+      </motion.h1>
+      <motion.h2
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1, transition: { delay: 0.3 } }}
+        className="mt-4 font-semibold text-xl md:text-2xl text-center"
+      >
+        This page doesn&apos;t exist yet
+      </motion.h2>
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.6, transition: { delay: 0.6 } }}
+        className="mt-2 text-center max-w-md"
+      >
+        The page you&apos;re looking for hasn&apos;t been built yet, or may have
+        been moved.
+      </motion.p>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1, transition: { delay: 0.9 } }}
+        className="mt-8"
+      >
+        <Link
+          href="/"
+          className="px-6 py-3 rounded-full bg-primary text-background font-semibold hover:bg-primary/80 transition-colors"
+        >
+          Back to Home
+        </Link>
+      </motion.div>
+    </section>
+  )
+}