Animated arm switcher component for header

cgen-3eb2fb0480f64660b2947021e6e7449a

client/components/ArmSwitcher.tsx

@@ -0,0 +1,130 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Zap } from "lucide-react";
+
+interface Arm {
+  id: string;
+  name: string;
+  label: string;
+  color: string;
+  bgColor: string;
+  textColor: string;
+  href: string;
+}
+
+const ARMS: Arm[] = [
+  {
+    id: "labs",
+    name: "Aethex Labs",
+    label: "Labs",
+    color: "#FBBF24",
+    bgColor: "bg-yellow-500/20",
+    textColor: "text-yellow-400",
+    href: "/labs",
+  },
+  {
+    id: "gameforge",
+    name: "GameForge",
+    label: "GameForge",
+    color: "#22C55E",
+    bgColor: "bg-green-500/20",
+    textColor: "text-green-400",
+    href: "/game-development",
+  },
+  {
+    id: "corp",
+    name: "Aethex Corp",
+    label: "Corp",
+    color: "#3B82F6",
+    bgColor: "bg-blue-500/20",
+    textColor: "text-blue-400",
+    href: "/consulting",
+  },
+  {
+    id: "foundation",
+    name: "Aethex Foundation",
+    label: "Foundation",
+    color: "#EF4444",
+    bgColor: "bg-red-500/20",
+    textColor: "text-red-400",
+    href: "/community",
+  },
+];
+
+export default function ArmSwitcher() {
+  const navigate = useNavigate();
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(true);
+  const [isHovering, setIsHovering] = useState(false);
+
+  useEffect(() => {
+    if (!isAnimating || isHovering) return;
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % ARMS.length);
+    }, 4000);
+
+    return () => clearInterval(interval);
+  }, [isAnimating, isHovering]);
+
+  const currentArm = ARMS[currentIndex];
+
+  const handleArmClick = (href: string) => {
+    navigate(href);
+  };
+
+  return (
+    <div
+      className="flex items-center gap-3 cursor-pointer group"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      onClick={() => handleArmClick(currentArm.href)}
+    >
+      {/* Animated Icon Container */}
+      <div className="relative h-10 w-10 flex items-center justify-center">
+        <div className={`absolute inset-0 rounded-lg ${currentArm.bgColor} transition-all duration-500`} />
+
+        {/* Temporary Logo - Simple geometric shape */}
+        <div
+          className="relative h-8 w-8 rounded flex items-center justify-center font-bold text-white transition-all duration-500"
+          style={{ backgroundColor: currentArm.color }}
+        >
+          {currentArm.label[0].toUpperCase()}
+        </div>
+
+        {/* Animated border indicator */}
+        <div
+          className="absolute inset-0 rounded-lg border-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+          style={{ borderColor: currentArm.color }}
+        />
+      </div>
+
+      {/* Text Label - Shows on hover/click or always visible */}
+      <div className="hidden sm:flex flex-col gap-0.5 overflow-hidden">
+        <div className="text-xs font-semibold text-gray-400 transition-colors duration-500">
+          {currentArm.label}
+        </div>
+        <div className={`text-xs font-medium transition-colors duration-500 ${currentArm.textColor}`}>
+          {currentArm.name}
+        </div>
+      </div>
+
+      {/* Indicator dots - Shows on mobile */}
+      <div className="sm:hidden flex gap-1">
+        {ARMS.map((_, idx) => (
+          <div
+            key={idx}
+            className={`h-1.5 rounded-full transition-all duration-300 ${
+              idx === currentIndex ? "w-3 bg-aethex-400" : "w-1.5 bg-gray-600"
+            }`}
+          />
+        ))}
+      </div>
+
+      {/* Tooltip on hover */}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap pointer-events-none">
+        Click to navigate
+      </div>
+    </div>
+  );
+}