full update

src/components/TabNavigation.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import BoldIcon from "@/components/ui/BoldIcon";
 import { cn } from "@/lib/utils";
+import { PAGE_SHELL_CLASS } from "@/constants/pageLayout";
 
 const tabs = [
   { href: "/", icon: "home-2", label: "خانه" },
@@ -43,8 +44,13 @@ export default function TabNavigation({ currentPage }: TabNavigationProps) {
   if (!mounted) return null;
 
   return (
-    <nav className="fixed bottom-2 left-1/2 z-50 w-full max-w-xl -translate-x-1/2 px-4 pb-2">
-      <div className="glass-panel gentle-transition flex justify-evenly rounded-full border border-white/40 p-2.5 shadow-lg dark:border-white/10">
+    <nav
+      className={cn(
+        "fixed bottom-2 left-1/2 z-50 -translate-x-1/2 pb-2",
+        PAGE_SHELL_CLASS
+      )}
+    >
+      <div className="glass-panel gentle-transition flex justify-evenly rounded-full border border-[#C3C3C3]/60 p-2.5 shadow-lg dark:border-white/10">
         {tabs.map((tab) => {
           const isActive =
             currentPage === tab.href ||
@@ -58,11 +64,7 @@ export default function TabNavigation({ currentPage }: TabNavigationProps) {
             <Link
               key={tab.href}
               href={tab.href}
-              className={cn(
-                "gentle-transition flex flex-col items-center gap-0.5 rounded-2xl px-2 py-1",
-                "hover:bg-black/5 active:scale-95 dark:hover:bg-white/10",
-                isActive && "tab-active-glass scale-105"
-              )}
+              className="gentle-transition flex flex-col items-center gap-0.5 px-2 py-1 active:scale-95"
             >
               <BoldIcon
                 name={tab.icon}