From bf42b60a0496b05fd83cb56cc034a541c9897462 Mon Sep 17 00:00:00 2001
From: Aman Varshney <amanvarshney.work@gmail.com>
Date: Mon, 4 Aug 2025 09:47:16 +0530
Subject: [PATCH] feat(web): add not found page

---
 .changeset/config.json                 |  5 +-
 apps/web/scripts/generate-analytics.ts |  6 +-
 apps/web/src/app/not-found.tsx         | 81 ++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/src/app/not-found.tsx

diff --git a/.changeset/config.json b/.changeset/config.json
index e55d4ca..21e54fb 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,8 +7,5 @@
 	"access": "public",
 	"baseBranch": "main",
 	"updateInternalDependencies": "patch",
-	"ignore": [
-		"@better-t-stack/backend",
-		"web"
-	]
+	"ignore": ["@better-t-stack/backend", "web"]
 }
diff --git a/apps/web/scripts/generate-analytics.ts b/apps/web/scripts/generate-analytics.ts
index e6a085d..1cc62e3 100644
--- a/apps/web/scripts/generate-analytics.ts
+++ b/apps/web/scripts/generate-analytics.ts
@@ -188,7 +188,7 @@ async function generateAnalyticsData() {
 							row["*.properties.examples.1"],
 						].filter(Boolean);
 						if (examples.length === 0) {
-							examplesCounts["none"] = (examplesCounts["none"] || 0) + 1;
+							examplesCounts.none = (examplesCounts.none || 0) + 1;
 						} else {
 							for (const example of examples) {
 								examplesCounts[example] = (examplesCounts[example] || 0) + 1;
@@ -205,7 +205,7 @@ async function generateAnalyticsData() {
 							row["*.properties.addons.5"],
 						].filter(Boolean);
 						if (addons.length === 0) {
-							addonsCounts["none"] = (addonsCounts["none"] || 0) + 1;
+							addonsCounts.none = (addonsCounts.none || 0) + 1;
 						} else {
 							for (const addon of addons) {
 								addonsCounts[addon] = (addonsCounts[addon] || 0) + 1;
@@ -354,7 +354,7 @@ async function generateAnalyticsData() {
 			monthlyTimeSeries: Object.entries(monthlyCounts)
 				.map(([month, count]) => ({
 					month,
-					displayMonth: new Date(month + "-01").toLocaleDateString("en-US", {
+					displayMonth: new Date(`${month}-01`).toLocaleDateString("en-US", {
 						month: "short",
 						year: "numeric",
 					}),
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 0000000..24f3b8a
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { FileX, Home, Terminal } from "lucide-react";
+import Link from "next/link";
+
+export default function NotFound() {
+	return (
+		<div className="mx-auto min-h-svh max-w-[1280px]">
+			<main className="mx-auto px-4 pt-12">
+				<div className="mb-8">
+					<div className="mb-6 flex flex-wrap items-center justify-between gap-2 sm:flex-nowrap">
+						<div className="flex items-center gap-2">
+							<Terminal className="h-4 w-4 text-primary" />
+							<span className="font-bold text-lg sm:text-xl">
+								ERROR_404.TXT
+							</span>
+						</div>
+						<div className="h-px flex-1 bg-border" />
+						<span className="text-muted-foreground text-xs">
+							[PAGE NOT FOUND]
+						</span>
+					</div>
+				</div>
+
+				<div className="mb-8 grid grid-cols-1 gap-4 lg:grid-cols-2">
+					<div className="flex h-full flex-col justify-between rounded border border-border p-4">
+						<div className="mb-4 flex items-center justify-between">
+							<div className="flex items-center gap-2">
+								<FileX className="h-4 w-4 text-primary" />
+								<span className="font-semibold text-sm">ERROR_DETAILS</span>
+							</div>
+							<div className="rounded border border-border bg-muted/30 px-2 py-1 text-xs">
+								404
+							</div>
+						</div>
+
+						<div className="space-y-3">
+							<div className="flex items-center justify-between rounded border border-border p-3">
+								<div className="flex items-center gap-2 font-mono text-sm">
+									<span className="text-primary">$</span>
+									<span className="text-foreground">
+										Page not found in directory
+									</span>
+								</div>
+								<div className="rounded border border-border bg-destructive/10 px-2 py-1 text-destructive text-xs">
+									ERROR
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<Link href="/">
+						<div className="group flex h-full cursor-pointer flex-col justify-between rounded border border-border p-4 transition-colors hover:bg-muted/10">
+							<div className="mb-4 flex items-center justify-between">
+								<div className="flex items-center gap-2">
+									<Home className="h-4 w-4 text-primary transition-transform group-hover:scale-110" />
+									<span className="font-semibold text-sm">GO_HOME</span>
+								</div>
+								<div className="rounded border border-border bg-muted/30 px-2 py-1 text-xs">
+									SAFE
+								</div>
+							</div>
+
+							<div className="space-y-3">
+								<div className="flex items-center justify-between rounded border border-border p-3">
+									<div className="flex items-center gap-2 text-sm">
+										<Home className="h-4 w-4 text-primary" />
+										<span className="text-foreground">Return to homepage</span>
+									</div>
+									<div className="rounded border border-border bg-muted/30 px-2 py-1 text-xs">
+										NAVIGATE
+									</div>
+								</div>
+							</div>
+						</div>
+					</Link>
+				</div>
+			</main>
+		</div>
+	);
+}