From ac465034c1954b1d6acbca7be8fe04a26356b4e7 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sun, 9 Nov 2025 07:27:58 +0000
Subject: [PATCH] Create full-screen mobile ARM switcher modal

cgen-5490629d08a74bb18f7f4645c91d42d3
---
 client/components/ArmSwitcherModal.tsx | 280 +++++++++++++++++++++++++
 1 file changed, 280 insertions(+)
 create mode 100644 client/components/ArmSwitcherModal.tsx

diff --git a/client/components/ArmSwitcherModal.tsx b/client/components/ArmSwitcherModal.tsx
new file mode 100644
index 00000000..cf104797
--- /dev/null
+++ b/client/components/ArmSwitcherModal.tsx
@@ -0,0 +1,280 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+
+interface Arm {
+  id: string;
+  name: string;
+  label: string;
+  color: string;
+  bgColor: string;
+  bgGradient: string;
+  textColor: string;
+  href: string;
+}
+
+const ARMS: Arm[] = [
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+  {
+    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",
+  },
+];
+
+const LOGO_URLS: Record<string, string> = {
+  labs: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F85fe7910cff6483db1ea99c154684844?format=webp&width=800",
+  gameforge:
+    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800",
+  corp: "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fae654ecc18b241bdab273893e8231970?format=webp&width=800",
+  foundation:
+    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800",
+  devlink:
+    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F9a96b43cbd7b49bb9d5434580319c793?format=webp&width=800",
+  nexus:
+    "https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F6df123b87a144b1fb99894d94198d97b?format=webp&width=800",
+};
+
+const ARM_DESCRIPTIONS: Record<string, string> = {
+  labs: "Research & Development - Pushing the boundaries of innovation",
+  gameforge:
+    "Game Development - Shipping games at the speed of thought with monthly cycles",
+  corp: "Enterprise Solutions - Consulting for large-scale transformations",
+  foundation: "Community & Education - Building open-source and talent pipelines",
+  devlink:
+    "Professional Networking - LinkedIn for Roblox developers and creators",
+  nexus: "Talent Marketplace - Cross-arm collaboration and opportunities",
+};
+
+interface ArmSwitcherModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function ArmSwitcherModal({
+  isOpen,
+  onClose,
+}: ArmSwitcherModalProps) {
+  const navigate = useNavigate();
+  const [selectedArm, setSelectedArm] = useState<string | null>(null);
+
+  const handleProceed = () => {
+    if (selectedArm) {
+      const arm = ARMS.find((a) => a.id === selectedArm);
+      if (arm) {
+        navigate(arm.href);
+        onClose();
+        setSelectedArm(null);
+      }
+    }
+  };
+
+  const handleBack = () => {
+    setSelectedArm(null);
+    onClose();
+  };
+
+  const selectedArmData = selectedArm ? ARMS.find((a) => a.id === selectedArm) : null;
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 md:hidden">
+      {/* Full screen background */}
+      <div className="absolute inset-0 bg-gray-950/95 backdrop-blur-md" />
+
+      {/* Content */}
+      <div className="relative h-full flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-6 border-b border-gray-800">
+          <button
+            onClick={handleBack}
+            className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            <span className="text-sm font-medium">Back</span>
+          </button>
+          <h1 className="text-lg font-bold text-white">Choose Your Arm</h1>
+          <div className="w-12" />
+        </div>
+
+        {/* Body - Show selected arm details or grid */}
+        <div className="flex-1 overflow-y-auto px-4 py-6">
+          {!selectedArm ? (
+            // Grid of all arms
+            <div className="space-y-3">
+              {ARMS.map((arm) => (
+                <button
+                  key={arm.id}
+                  onClick={() => setSelectedArm(arm.id)}
+                  className={`w-full p-4 rounded-lg border-2 transition-all duration-200 text-left hover:scale-105 active:scale-95 ${
+                    arm.bgColor
+                  } border-gray-700 hover:border-white/30`}
+                >
+                  <div className="flex items-start gap-3">
+                    <img
+                      src={LOGO_URLS[arm.id]}
+                      alt={arm.label}
+                      className="w-12 h-12 object-contain flex-shrink-0"
+                    />
+                    <div className="flex-1">
+                      <h3 className="font-bold text-white text-base">
+                        {arm.label}
+                      </h3>
+                      <p className="text-xs text-gray-400 mt-1">
+                        {ARM_DESCRIPTIONS[arm.id]}
+                      </p>
+                    </div>
+                    <div className={`w-2 h-2 rounded-full mt-1 ${arm.textColor}`} />
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : selectedArmData ? (
+            // Selected arm detail view
+            <div className="space-y-6">
+              {/* Large logo */}
+              <div className="flex justify-center py-8">
+                <div
+                  className={`w-32 h-32 flex items-center justify-center rounded-2xl bg-gradient-to-br ${selectedArmData.bgGradient} p-4`}
+                >
+                  <img
+                    src={LOGO_URLS[selectedArmData.id]}
+                    alt={selectedArmData.label}
+                    className="w-24 h-24 object-contain"
+                  />
+                </div>
+              </div>
+
+              {/* Title and description */}
+              <div className="text-center space-y-3">
+                <h2
+                  className={`text-3xl font-bold ${selectedArmData.textColor}`}
+                >
+                  {selectedArmData.label}
+                </h2>
+                <p className="text-gray-300 text-base leading-relaxed">
+                  {ARM_DESCRIPTIONS[selectedArmData.id]}
+                </p>
+              </div>
+
+              {/* Features */}
+              <div className={`p-4 rounded-lg ${selectedArmData.bgColor} border border-gray-700`}>
+                <h3 className="text-sm font-semibold text-gray-200 mb-3">
+                  What you'll get:
+                </h3>
+                <ul className="space-y-2">
+                  <li className="flex items-start gap-2">
+                    <span className={`text-lg mt-0.5 ${selectedArmData.textColor}`}>
+                      ✨
+                    </span>
+                    <span className="text-sm text-gray-300">
+                      Access to exclusive opportunities
+                    </span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className={`text-lg mt-0.5 ${selectedArmData.textColor}`}>
+                      🚀
+                    </span>
+                    <span className="text-sm text-gray-300">
+                      Connect with like-minded creators
+                    </span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className={`text-lg mt-0.5 ${selectedArmData.textColor}`}>
+                      🎯
+                    </span>
+                    <span className="text-sm text-gray-300">
+                      Discover resources tailored to your interests
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        {/* Footer - Back/Proceed buttons */}
+        <div className="px-4 py-6 border-t border-gray-800 space-y-3">
+          {selectedArm ? (
+            <>
+              <button
+                onClick={handleProceed}
+                className={`w-full py-3 rounded-lg font-semibold transition-all duration-200 text-white bg-gradient-to-r ${selectedArmData?.bgGradient} hover:shadow-lg active:scale-95`}
+              >
+                Proceed to {selectedArmData?.label}
+              </button>
+              <button
+                onClick={() => setSelectedArm(null)}
+                className="w-full py-3 rounded-lg font-semibold transition-all duration-200 text-gray-300 bg-gray-800/50 hover:bg-gray-700/50 active:scale-95"
+              >
+                Choose Different Arm
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={handleBack}
+              className="w-full py-3 rounded-lg font-semibold transition-all duration-200 text-gray-300 bg-gray-800/50 hover:bg-gray-700/50 active:scale-95"
+            >
+              Close Menu
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}