refactor(routing): isolate public and protected routes

src/pages/NotFound.tsx

@@ -0,0 +1,70 @@
+import { Link, useLocation } from "react-router-dom"
+import { ArrowLeft, ArrowRight, Command, Compass, 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 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>
+        </div>
+      </main>
+    </div>
+  )
+}