From fad9fcdc6b8bf0ef25a2647303d056305f049abe Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Mon, 10 Nov 2025 20:00:44 +0000 Subject: [PATCH] Sleek Arm Selector Modal with Working Buttons and Animations cgen-26ea03593ae24d4b92ea5a1b1edc250d --- client/components/ArmSwitcherModal.tsx | 350 +++++++++++-------------- 1 file changed, 157 insertions(+), 193 deletions(-) diff --git a/client/components/ArmSwitcherModal.tsx b/client/components/ArmSwitcherModal.tsx index 52cb1f4f..40488761 100644 --- a/client/components/ArmSwitcherModal.tsx +++ b/client/components/ArmSwitcherModal.tsx @@ -1,13 +1,11 @@ -import { useState, useEffect } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { ArrowLeft, Sparkles } from "lucide-react"; +import { ArrowLeft } from "lucide-react"; interface Arm { id: string; - name: string; label: string; color: string; - bgColor: string; bgGradient: string; textColor: string; href: string; @@ -18,87 +16,73 @@ interface Arm { const ARMS: Arm[] = [ { id: "staff", - name: "AeThex | Staff", label: "Staff", color: "#7c3aed", - bgColor: "bg-purple-500/20", bgGradient: "from-purple-600 to-purple-400", textColor: "text-purple-400", href: "/staff", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc0414efd7af54ef4b821a05d469150d0?format=webp&width=800", - tip: "Internal operations and tools for AeThex employees", + tip: "Internal operations for AeThex employees", }, { id: "labs", - name: "AeThex | Labs", label: "Labs", color: "#FBBF24", - bgColor: "bg-yellow-500/20", bgGradient: "from-yellow-600 to-yellow-400", textColor: "text-yellow-400", href: "/labs", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fd93f7113d34347469e74421c3a3412e5?format=webp&width=800", - tip: "Research & Development - Pushing the boundaries of innovation", + tip: "R&D pushing innovation boundaries", }, { id: "gameforge", - name: "AeThex | GameForge", label: "GameForge", color: "#22C55E", - bgColor: "bg-green-500/20", bgGradient: "from-green-600 to-green-400", textColor: "text-green-400", href: "/gameforge", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800", - tip: "Game Development - Shipping games at the speed of thought", + tip: "Games shipped monthly at speed", }, { id: "corp", - name: "AeThex | Corp", label: "Corp", color: "#3B82F6", - bgColor: "bg-blue-500/20", bgGradient: "from-blue-600 to-blue-400", textColor: "text-blue-400", href: "/corp", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fae654ecc18b241bdab273893e8231970?format=webp&width=800", - tip: "Enterprise Solutions - Consulting for large-scale transformations", + tip: "Enterprise solutions for scale", }, { id: "foundation", - name: "AeThex | Foundation", label: "Foundation", color: "#EF4444", - bgColor: "bg-red-500/20", bgGradient: "from-red-600 to-red-400", textColor: "text-red-400", href: "/foundation", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800", - tip: "Community & Education - Building open-source and talent pipelines", + tip: "Community & education initiatives", }, { id: "devlink", - name: "AeThex | Dev-Link", label: "Dev-Link", color: "#06B6D4", - bgColor: "bg-cyan-500/20", bgGradient: "from-cyan-600 to-cyan-400", textColor: "text-cyan-400", href: "/dev-link", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800", - tip: "Professional Networking - LinkedIn for Roblox developers and creators", + tip: "Professional network for creators", }, { id: "nexus", - name: "AeThex | Nexus", label: "Nexus", color: "#A855F7", - bgColor: "bg-purple-500/20", bgGradient: "from-purple-600 to-purple-400", textColor: "text-purple-400", href: "/nexus", icon: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F6df123b87a144b1fb99894d94198d97b?format=webp&width=800", - tip: "Talent Marketplace - Cross-arm collaboration and opportunities", + tip: "Talent marketplace & collaboration", }, ]; @@ -113,19 +97,23 @@ export default function ArmSwitcherModal({ }: ArmSwitcherModalProps) { const navigate = useNavigate(); const [selectedArm, setSelectedArm] = useState(null); - const [isLoading, setIsLoading] = useState(false); + const [isNavigating, setIsNavigating] = useState(false); + + const handleSelectArm = (armId: string) => { + setSelectedArm(armId); + }; const handleProceed = () => { if (selectedArm) { const arm = ARMS.find((a) => a.id === selectedArm); if (arm) { - setIsLoading(true); + setIsNavigating(true); setTimeout(() => { navigate(arm.href); onClose(); setSelectedArm(null); - setIsLoading(false); - }, 300); + setIsNavigating(false); + }, 600); } } }; @@ -138,185 +126,161 @@ export default function ArmSwitcherModal({ } }; - const selectedArmData = selectedArm - ? ARMS.find((a) => a.id === selectedArm) - : null; + const selectedArmData = selectedArm ? ARMS.find((a) => a.id === selectedArm) : null; if (!isOpen) return null; return ( -
- {/* Animated background */} -
-
-
+
+ {/* Header */} +
+ +

+ {selectedArm ? selectedArmData?.label : "Select Arm"} +

+
{/* Content */} -
- {/* Header */} -
- -

- {selectedArm ? selectedArmData?.label : "Choose Your Arm"} -

-
-
- - {/* Body - Arm Grid or Landing Page */} -
- {!selectedArm ? ( - // Arm Selection Grid -
- {ARMS.map((arm) => ( - +
+ + ))} +
+ ) : selectedArmData && !isNavigating ? ( + // Landing Page - Minimal +
+ {/* Icon */} +
+
+ {selectedArmData.label} +
+
+ + {/* Title & Tip */} +
+

+ {selectedArmData.label} +

+

{selectedArmData.tip}

+
+ + {/* Progress Bars */} +
+ {[0, 1, 2, 3, 4].map((i) => ( +
))}
- ) : selectedArmData ? ( - // Arm Landing Page - Fullscreen Sci-Fi Experience -
- {/* Large Logo */} -
+
+ ) : ( + // Loading State +
+
+ {[0, 1, 2, 3, 4].map((i) => (
- {selectedArmData.label} -
-
- - {/* Title and Description */} -
-

- {selectedArmData.label} -

-
- -

Initializing {selectedArmData.label} systems...

-
-
- - {/* Quick Tip Section */} -
-
-
- ⚡ -
-
-

- Quick Briefing -

-

- {selectedArmData.tip} -

-
-
-
- - {/* Features */} -
-
-
🚀
-

Get Started

-
-
-
🎯
-

Explore

-
-
-
✨
-

Connect

-
-
- - {/* Loading Animation */} - {isLoading && ( -
- {[0, 1, 2, 3, 4].map((i) => ( -
- ))} -
- )} + /> + ))}
- ) : null} -
- - {/* Footer - Action Buttons */} -
- {selectedArm ? ( - <> - - - - ) : ( - - )} -
+

Initializing...

+
+ )}
+ + {/* Footer - Buttons */} +
+ {selectedArm && !isNavigating ? ( + <> + + + + ) : !isNavigating ? ( + + ) : null} +
+ +
); }