refactor(landing): align public navigation

src/locales/en.ts

@@ -300,8 +300,10 @@ export const en = {
     },
     createdSuccess: "Workspace created successfully",
     updatedSuccess: "Workspace updated successfully",
-    fetchError: "Failed to load workspace data",
+    fetchError: "Failed to load workspace data",
-    remove: "Remove",
+    loadErrorDescription: "The backend service may be unavailable. Please try again in a moment.",
+    retry: "Try again",
+    remove: "Remove",
     noUsersFound: "No user found",
     selectRole: "Select Role",
     add: "Add",
@@ -398,9 +400,10 @@ export const en = {
     brandLabel: "Operating system for time",
     eyebrow: "Built for high-discipline teams that need clean time intelligence",
     nav: {
-      demo: "Product demo",
+      demo: "Product demo",
-      features: "Core capabilities",
+      features: "Core capabilities",
-      workflow: "How it works",
+      workflow: "How it works",
+      about: "About us",
     },
     actions: {
       switchToEnglish: "English",
@@ -409,8 +412,9 @@ export const en = {
       openApp: "Open app",
       openWorkspace: "Open workspace",
       startNow: "Start tracking with control",
-      watchDemo: "See the product demo",
+      watchDemo: "See the product demo",
-      readTerms: "Read terms",
+      readTerms: "Read terms",
+      readAbout: "About Qlockify",
     },
     hero: {
       titleTop: "Turn every working hour into a reliable operating signal.",

src/locales/fa.ts

@@ -301,8 +301,10 @@ export const fa = {
     },
     createdSuccess: "ورک‌اسپیس با موفقیت ایجاد شد",
     updatedSuccess: "ورک‌اسپیس با موفقیت ویرایش شد",
-    fetchError: "خطا در دریافت اطلاعات ورک‌اسپیس",
+    fetchError: "خطا در دریافت اطلاعات ورک‌اسپیس",
-    remove: "حذف",
+    loadErrorDescription: "ممکن است سرویس بک‌اند در دسترس نباشد. لطفاً چند لحظه بعد دوباره تلاش کنید.",
+    retry: "تلاش دوباره",
+    remove: "حذف",
     noUsersFound: "کاربری یافت نشد",
     selectRole: "انتخاب نقش",
     add: "افزودن",
@@ -395,9 +397,10 @@ export const fa = {
     brandLabel: "زیرساخت عملیاتی زمان",
     eyebrow: "طراحی‌شده برای تیم‌های دقیق که به داده زمانی قابل اتکا نیاز دارند",
     nav: {
-      demo: "دموی محصول",
+      demo: "دموی محصول",
-      features: "قابلیت‌ها",
+      features: "قابلیت‌ها",
-      workflow: "فرآیند کار",
+      workflow: "فرآیند کار",
+      about: "درباره ما",
     },
     actions: {
       switchToEnglish: "English",
@@ -406,8 +409,9 @@ export const fa = {
       openApp: "ورود به اپ",
       openWorkspace: "باز کردن ورک‌اسپیس",
       startNow: "شروع با کنترل کامل",
-      watchDemo: "مشاهده دموی محصول",
+      watchDemo: "مشاهده دموی محصول",
-      readTerms: "مطالعه قوانین",
+      readTerms: "مطالعه قوانین",
+      readAbout: "درباره Qlockify",
     },
     hero: {
       titleTop: "هر ساعت کاری را به یک سیگنال عملیاتی قابل اعتماد تبدیل کنید.",

src/pages/Landing.tsx

@@ -110,15 +110,12 @@ export default function Landing() {
           </button>
 
           <div className="hidden items-center gap-2 md:flex">
-            <a href="#demo" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white">
+            <Link to="/" className="rounded-full bg-slate-950 px-4 py-2 text-sm font-medium text-white shadow-sm dark:bg-white dark:text-slate-950">
-              {t.landing.nav.demo}
+              {lang === "fa" ? "خانه" : "Home"}
-            </a>
+            </Link>
-            <a href="#features" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white">
+            <Link to="/about" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white">
-              {t.landing.nav.features}
+              {t.landing.nav.about}
-            </a>
+            </Link>
-            <a href="#workflow" className="rounded-full px-4 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-white">
-              {t.landing.nav.workflow}
-            </a>
           </div>
 
           <div className="flex items-center gap-2">
@@ -385,31 +382,38 @@ export default function Landing() {
 
         <section className="py-8">
           <div className="relative overflow-hidden rounded-[2.5rem] border border-slate-950/5 bg-slate-950 px-6 py-10 text-white shadow-[0_40px_100px_-40px_rgba(15,23,42,0.8)] dark:border-white/10 sm:px-10">
-            <div className="pointer-events-none absolute inset-y-0 right-0 w-[45%] bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.35),transparent_55%),radial-gradient(circle_at_bottom_right,rgba(245,158,11,0.22),transparent_45%)]" />
+            <div className="flex flex-row pointer-events-none absolute inset-y-0 right-0 w-[45%] bg-[radial-gradient(circle_at_top_right,rgba(34,211,238,0.35),transparent_55%),radial-gradient(circle_at_bottom_right,rgba(245,158,11,0.22),transparent_45%)]" />
-            <div className="relative flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+              <div className="relative flex flex-col lg:flex-row gap-6 justify-between">
-              <div className="max-w-3xl">
+                <div className="max-w-4xl">
-                <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">{t.landing.finalCtaTag}</div>
+                  <div className="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-300">{t.landing.finalCtaTag}</div>
-                <h2 className="mt-4 text-4xl font-semibold leading-[1.1] tracking-[-0.05em] sm:text-5xl">
+                  <h2 className="mt-4 text-4xl font-semibold leading-[1.1] tracking-[-0.05em] sm:text-5xl">
-                  {t.landing.finalCtaTitle}
+                    {t.landing.finalCtaTitle}
-                </h2>
+                  </h2>
-                <p className="mt-4 text-lg leading-8 text-slate-300">{t.landing.finalCtaDescription}</p>
+                  <p className="mt-4 text-lg leading-8 text-slate-300">{t.landing.finalCtaDescription}</p>
+                </div>
+                <div className="flex flex-row lg:flex-col gap-3">
+                  <Button
+                    onClick={() => navigate(ctaTarget)}
+                    className="h-14 rounded-full bg-white px-7 text-base font-semibold text-slate-950 hover:bg-slate-100"
+                  >
+                    {isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    asChild
+                    className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
+                  >
+                    <Link to="/terms">{t.landing.actions.readTerms}</Link>
+                  </Button>
+                  <Button
+                    variant="outline"
+                    asChild
+                    className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
+                  >
+                    <Link to="/about">{t.landing.actions.readAbout}</Link>
+                  </Button>
+                </div>
               </div>
-              <div className="flex flex-col gap-3 sm:flex-row">
-                <Button
-                  onClick={() => navigate(ctaTarget)}
-                  className="h-14 rounded-full bg-white px-7 text-base font-semibold text-slate-950 hover:bg-slate-100"
-                >
-                  {isAuthenticated ? t.landing.actions.openWorkspace : t.landing.actions.startNow}
-                </Button>
-                <Button
-                  variant="outline"
-                  asChild
-                  className="h-14 rounded-full border-white/20 bg-white/5 px-7 text-base text-white hover:bg-white/10 dark:border-white/20 dark:bg-white/5 dark:text-white dark:hover:bg-white/10"
-                >
-                  <Link to="/terms">{t.landing.actions.readTerms}</Link>
-                </Button>
-              </div>
-            </div>
           </div>
         </section>
       </div>