From 20027ecc3de3eec26261c581e00b4962625140b2 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sat, 25 Apr 2026 14:44:52 +0800
Subject: [PATCH] feat: add styled 404 page matching landing page theme

---
 app/not-found.tsx | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 app/not-found.tsx

diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..0a5a32b
--- /dev/null
+++ b/app/not-found.tsx
@@ -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>
+  )
+}