redesign: glassmorphism UI with big cards, 3-col layout, ambient orbs

components/BottomNav.tsx

@@ -9,16 +9,17 @@ interface Props {
 }
 
 const TABS = [
-  { id: "home", label: "Главная", icon: Home },
-  { id: "devices", label: "Устройства", icon: Cpu },
-  { id: "tasks", label: "Задачи", icon: CheckSquare },
-  { id: "settings", label: "Настройки", icon: Settings },
+  { id: "home", label: "Главная", icon: Home, color: "#6366f1" },
+  { id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
+  { id: "tasks", label: "Задачи", icon: CheckSquare, color: "#8b5cf6" },
+  { id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
 ];
 
 export default function BottomNav({ active, onChange }: Props) {
   return (
     <motion.div
-      className="glass-card px-4 py-2 flex items-center justify-around no-select"
+      className="glass-card px-3 py-2 flex items-center justify-around no-select"
+      style={{ borderRadius: "20px" }}
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5 }}
@@ -30,33 +31,29 @@ export default function BottomNav({ active, onChange }: Props) {
           <motion.button
             key={tab.id}
             onClick={() => onChange(tab.id)}
-            className="flex flex-col items-center gap-1 px-6 py-2 rounded-xl relative"
-            whileTap={{ scale: 0.88 }}
-            style={{
-              background: isActive
-                ? "rgba(99,102,241,0.15)"
-                : "transparent",
-            }}
+            className="flex flex-col items-center gap-1.5 px-8 py-2 rounded-2xl relative"
+            whileTap={{ scale: 0.85 }}
           >
             {isActive && (
               <motion.div
-                className="absolute inset-0 rounded-xl"
+                className="absolute inset-0 rounded-2xl"
                 style={{
-                  background:
-                    "linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1))",
-                  border: "1px solid rgba(99,102,241,0.3)",
+                  background: `${tab.color}15`,
+                  border: `1px solid ${tab.color}30`,
+                  boxShadow: `0 0 16px ${tab.color}20`,
                 }}
                 layoutId="navActive"
-                transition={{ type: "spring", stiffness: 400, damping: 30 }}
+                transition={{ type: "spring", stiffness: 450, damping: 30 }}
               />
             )}
             <Icon
               size={22}
-              color={isActive ? "#6366f1" : "var(--text-secondary)"}
+              color={isActive ? tab.color : "var(--text-secondary)"}
+              strokeWidth={isActive ? 2 : 1.5}
             />
             <span
-              className="text-xs font-medium"
-              style={{ color: isActive ? "#6366f1" : "var(--text-secondary)" }}
+              className="text-xs font-semibold"
+              style={{ color: isActive ? tab.color : "var(--text-secondary)" }}
             >
               {tab.label}
             </span>