From e8eff6c2cb7e473951012d4d53b20307d1d0c971 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 7 Jun 2026 12:49:38 +0330
Subject: [PATCH] fix(routing): simplify not found page

---
 src/pages/NotFound.tsx | 96 ++++++++++++++++--------------------------
 1 file changed, 37 insertions(+), 59 deletions(-)

diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index b7e2db0..580f8f4 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -1,70 +1,48 @@
-import { Link, useLocation } from "react-router-dom"
-import { ArrowLeft, ArrowRight, Command, Compass, Home } from "lucide-react"
+import { useNavigate } from "react-router-dom"
+import { ArrowLeft, ArrowRight, Home } from "lucide-react"
 
 import { Button } from "../components/ui/button"
 import { useTranslation } from "../hooks/useTranslation"
-import { cn } from "../lib/utils"
 
 export default function NotFound() {
-  const location = useLocation()
-  const { lang, t } = useTranslation()
+  const navigate = useNavigate()
+  const { lang } = useTranslation()
   const isFa = lang === "fa"
 
   return (
-    <div className="min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,#e0f2fe_0%,#f8fafc_36%,#eef2ff_100%)] text-slate-950 dark:bg-[radial-gradient(circle_at_top,#082f49_0%,#020617_40%,#020617_100%)] dark:text-slate-50">
-      <div className="landing-aurora pointer-events-none fixed inset-0 opacity-80" />
-      <div className="landing-hero-grid pointer-events-none fixed inset-0 opacity-70 dark:opacity-40" />
-
-      <main className="relative mx-auto flex min-h-screen max-w-5xl items-center px-4 py-12 sm:px-6 lg:px-8">
-        <div className="animate-landing-rise w-full overflow-hidden rounded-[2.5rem] border border-white/70 bg-white/80 p-6 shadow-[0_45px_110px_-48px_rgba(15,23,42,0.6)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/70 sm:p-10">
-          <div className="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
-            <div className="max-w-3xl">
-              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-cyan-200/70 bg-cyan-50/80 px-4 py-2 text-sm font-semibold text-cyan-900 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-100">
-                <Compass className="h-4 w-4" />
-                {isFa ? "مسیر پیدا نشد" : "Route not found"}
-              </div>
-              <h1 className="text-5xl font-semibold tracking-[-0.06em] text-slate-950 sm:text-7xl dark:text-white">
-                404
-              </h1>
-              <p className="mt-5 text-xl leading-9 text-slate-600 dark:text-slate-300">
-                {isFa
-                  ? "این آدرس در رابط کاربری Qlockify تعریف نشده است."
-                  : "This endpoint is not defined in the Qlockify interface."}
-              </p>
-              <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 font-mono text-sm text-slate-700 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200">
-                {location.pathname}
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
-              <Button
-                asChild
-                className="h-14 rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
-              >
-                <Link to="/">
-                  <Home className="me-2 h-4 w-4" />
-                  {isFa ? "بازگشت به خانه" : "Back home"}
-                </Link>
-              </Button>
-              <Button
-                asChild
-                variant="outline"
-                className="h-14 rounded-full border-slate-200 bg-white/85 px-7 text-base text-slate-800 shadow-sm backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
-              >
-                <Link to="/about">
-                  <Command className="me-2 h-4 w-4" />
-                  {isFa ? "درباره Qlockify" : "About Qlockify"}
-                  {isFa ? (
-                    <ArrowLeft className="ms-2 h-4 w-4" />
-                  ) : (
-                    <ArrowRight className={cn("ms-2 h-4 w-4")} />
-                  )}
-                </Link>
-              </Button>
-            </div>
-          </div>
+    <main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,#e0f2fe_0%,#f8fafc_42%,#eef2ff_100%)] px-4 text-center text-slate-950 dark:bg-[radial-gradient(circle_at_top,#082f49_0%,#020617_44%,#020617_100%)] dark:text-slate-50">
+      <section className="mx-auto max-w-2xl">
+        <div className="text-[7rem] font-semibold leading-none tracking-[-0.08em] text-slate-950 sm:text-[10rem] dark:text-white">
+          404
         </div>
-      </main>
-    </div>
+        <h1 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-5xl">
+          {isFa ? "صفحه پیدا نشد" : "Page not found"}
+        </h1>
+        <p className="mx-auto mt-5 max-w-xl text-base leading-8 text-slate-600 sm:text-lg dark:text-slate-300">
+          {isFa
+            ? "این صفحه وجود ندارد یا آدرس آن تغییر کرده است."
+            : "This page does not exist or its address has changed."}
+        </p>
+        <div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => navigate(-1)}
+            className="h-14 rounded-full border-slate-200 bg-white/80 px-7 text-base text-slate-800 backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
+          >
+            {isFa ? <ArrowRight className="me-2 h-4 w-4" /> : <ArrowLeft className="me-2 h-4 w-4" />}
+            {isFa ? "بازگشت" : "Go back"}
+          </Button>
+          <Button
+            type="button"
+            onClick={() => navigate("/")}
+            className="h-14 rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
+          >
+            <Home className="me-2 h-4 w-4" />
+            {isFa ? "صفحه اصلی" : "Home page"}
+          </Button>
+        </div>
+      </section>
+    </main>
   )
 }