feat: render CMS-driven public redesign

src/components/MobileBottomNav.tsx

@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation";
 import { useAuth } from "@/contexts/AuthContext";
 import { Link } from "@/lib/router";
 import { cn } from "@/lib/utils";
+import type { SiteContent } from "@/lib/content-cms";
 
 type NavItem = {
   key: string;
@@ -22,7 +23,7 @@ const isProfileOrAuthPath = (pathname: string) =>
   pathname.startsWith("/auth/") ||
   pathname.startsWith("/reset-password");
 
-export default function MobileBottomNav() {
+export default function MobileBottomNav({ siteContent }: { siteContent: SiteContent }) {
   const pathname = usePathname() || "/";
   const { isAuthenticated } = useAuth();
 
@@ -33,21 +34,21 @@ export default function MobileBottomNav() {
   const items: NavItem[] = [
     {
       key: "home",
-      label: "خانه",
+      label: siteContent.navigation.home,
       href: "/",
       icon: Home,
       matches: (current) => current === "/",
     },
     {
       key: "events",
-      label: "رویدادها",
+      label: siteContent.navigation.events,
       href: "/events",
       icon: CalendarDays,
       matches: (current) => current === "/events" || current.startsWith("/events/"),
     },
     {
       key: "blog",
-      label: "بلاگ",
+      label: siteContent.navigation.blog,
       href: "/blog",
       icon: Newspaper,
       matches: (current) => current === "/blog" || current.startsWith("/blog/"),
@@ -67,8 +68,8 @@ export default function MobileBottomNav() {
       style={{ bottom: "calc(env(safe-area-inset-bottom) + 0.9rem)" }}
     >
       <nav
-        aria-label="Mobile navigation"
-        className="mx-auto flex w-full max-w-sm items-center justify-between rounded-[1.75rem] border border-white/20 bg-background/70 px-2 py-2 shadow-[0_18px_60px_rgba(15,23,42,0.18)] backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/65"
+        aria-label="ناوبری اصلی موبایل"
+        className="mx-auto flex w-full max-w-md items-center justify-between rounded-2xl border border-border bg-background/95 px-1.5 py-1.5 shadow-lg backdrop-blur-xl"
         dir="rtl"
       >
         {items.map((item) => {
@@ -80,15 +81,15 @@ export default function MobileBottomNav() {
               key={item.key}
               to={item.href}
               className={cn(
-                "flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-2xl px-2 py-2 text-[11px] font-medium transition-all",
+                "flex min-h-11 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1.5 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 active
-                  ? "bg-primary text-primary-foreground shadow-sm"
-                  : "text-muted-foreground hover:bg-white/30 hover:text-foreground dark:hover:bg-white/10",
+                  ? "bg-secondary text-primary"
+                  : "text-muted-foreground hover:bg-secondary hover:text-foreground",
               )}
               aria-current={active ? "page" : undefined}
             >
-              <Icon className={cn("h-5 w-5", active ? "scale-105" : "")} />
-              <span>{item.label}</span>
+              <Icon aria-hidden="true" className="h-4 w-4" />
+              <span className="max-w-full truncate">{item.label}</span>
             </Link>
           );
         })}