From 8ba89278eb87b6f75ce487e93bc9e5d9273c7220 Mon Sep 17 00:00:00 2001
From: sirpiglr <49359077-sirpiglr@users.noreply.replit.com>
Date: Sat, 6 Dec 2025 02:57:51 +0000
Subject: [PATCH] Add visual polish and consistent theming to the landing page

Integrate a TypeWriter component for animated headlines, apply scanline and grid overlays for a retro aesthetic, and transition realm colors to HSL-based CSS variables for theme consistency. Also, introduce `AnimatePresence` for improved component animations and wrap the landing page in a shared `Layout` component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: ffdbb5c6-e466-4bfb-9a16-1473e09d5156
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/KZZu8Eu
Replit-Helium-Checkpoint-Created: true
---
 .replit                                      |   4 +
 client/components/IsometricRealmSelector.tsx | 301 +++++++------------
 2 files changed, 116 insertions(+), 189 deletions(-)

diff --git a/.replit b/.replit
index 76d2fa09..946cff91 100644
--- a/.replit
+++ b/.replit
@@ -60,6 +60,10 @@ externalPort = 3000
 localPort = 40437
 externalPort = 3001
 
+[[ports]]
+localPort = 43575
+externalPort = 3002
+
 [deployment]
 deploymentTarget = "autoscale"
 run = ["node", "dist/server/production.mjs"]
diff --git a/client/components/IsometricRealmSelector.tsx b/client/components/IsometricRealmSelector.tsx
index 35f2b139..c0efe7a0 100644
--- a/client/components/IsometricRealmSelector.tsx
+++ b/client/components/IsometricRealmSelector.tsx
@@ -1,9 +1,44 @@
 import { useState, useCallback, useEffect, useMemo } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { useNavigate, Link } from "react-router-dom";
 import IsometricRealmCard, { RealmData } from "./IsometricRealmCard";
 
-const REALM_COLORS = ["#a855f7", "#22c55e", "#ef4444", "#eab308", "#3b82f6", "#7c3aed", "#06b6d4"];
+function TypeWriter({ text, delay = 0 }: { text: string; delay?: number }) {
+  const [displayText, setDisplayText] = useState("");
+  const [started, setStarted] = useState(false);
+
+  useEffect(() => {
+    const startTimer = setTimeout(() => setStarted(true), delay);
+    return () => clearTimeout(startTimer);
+  }, [delay]);
+
+  useEffect(() => {
+    if (!started) return;
+    if (displayText.length < text.length) {
+      const timer = setTimeout(() => {
+        setDisplayText(text.slice(0, displayText.length + 1));
+      }, 50);
+      return () => clearTimeout(timer);
+    }
+  }, [displayText, text, started]);
+
+  return (
+    <>
+      {displayText}
+      {displayText.length < text.length && <span className="cursor-blink">|</span>}
+    </>
+  );
+}
+
+const REALM_COLORS = [
+  "hsl(250, 100%, 60%)",
+  "hsl(120, 100%, 70%)",
+  "hsl(280, 100%, 70%)",
+  "hsl(50, 100%, 70%)",
+  "hsl(210, 100%, 70%)",
+  "hsl(250, 100%, 70%)",
+  "hsl(180, 100%, 60%)",
+];
 
 interface ParticleData {
   id: number;
@@ -33,7 +68,7 @@ const realms: RealmData[] = [
   {
     id: "nexus",
     label: "NEXUS",
-    color: "#a855f7",
+    color: "hsl(250, 100%, 60%)",
     route: "/dashboard/nexus",
     icon: "🌐",
     description: "The marketplace hub. Find opportunities, contracts, and commissions.",
@@ -42,7 +77,7 @@ const realms: RealmData[] = [
   {
     id: "gameforge",
     label: "GAMEFORGE",
-    color: "#22c55e",
+    color: "hsl(120, 100%, 70%)",
     route: "/gameforge",
     icon: "🎮",
     description: "Game development powerhouse. Build immersive experiences together.",
@@ -51,7 +86,7 @@ const realms: RealmData[] = [
   {
     id: "foundation",
     label: "FOUNDATION",
-    color: "#ef4444",
+    color: "hsl(0, 70%, 55%)",
     route: "/foundation",
     icon: "🏛️",
     description: "Learn and grow. Courses, mentorship, and achievement tracking.",
@@ -60,7 +95,7 @@ const realms: RealmData[] = [
   {
     id: "labs",
     label: "LABS",
-    color: "#eab308",
+    color: "hsl(50, 100%, 70%)",
     route: "/dashboard/labs",
     icon: "🔬",
     description: "Research & experimentation. Push the boundaries of what's possible.",
@@ -69,7 +104,7 @@ const realms: RealmData[] = [
   {
     id: "corp",
     label: "CORP",
-    color: "#3b82f6",
+    color: "hsl(210, 100%, 70%)",
     route: "/corp",
     icon: "🏢",
     description: "Enterprise solutions. Managed services for teams and organizations.",
@@ -78,7 +113,7 @@ const realms: RealmData[] = [
   {
     id: "staff",
     label: "STAFF",
-    color: "#7c3aed",
+    color: "hsl(250, 100%, 70%)",
     route: "/staff",
     icon: "⚡",
     description: "Internal operations and team management for AeThex staff members.",
@@ -87,7 +122,7 @@ const realms: RealmData[] = [
   {
     id: "devlink",
     label: "DEV-LINK",
-    color: "#06b6d4",
+    color: "hsl(180, 100%, 60%)",
     route: "/devlink",
     icon: "🔗",
     description: "Developer networking and collaboration. Connect with fellow builders.",
@@ -150,6 +185,10 @@ export default function IsometricRealmSelector() {
 
   return (
     <div className="realm-selector">
+      {/* Scanline overlay */}
+      <div className="scanline-overlay" />
+      {/* Tech grid overlay */}
+      <div className="grid-overlay" />
       {/* Ambient particles */}
       <div className="ambient-layer">
         {particles.map((particle) => (
@@ -188,7 +227,9 @@ export default function IsometricRealmSelector() {
           transition={{ duration: 0.6, delay: 0.2 }}
         >
           <p className="tagline">Build the Future</p>
-          <h1 className="main-headline">The Platform for Builders</h1>
+          <h1 className="main-headline">
+            <TypeWriter text="The Platform for Builders" delay={400} />
+          </h1>
           <p className="sub-headline">
             AeThex is an advanced development platform and community where creators collaborate, 
             learn, and bring ideas to life. Join thousands of developers, designers, and innovators.
@@ -226,11 +267,47 @@ export default function IsometricRealmSelector() {
         .realm-selector {
           min-height: 100vh;
           width: 100%;
-          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-          color: #e5e7eb;
+          font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
+          color: hsl(var(--foreground));
           position: relative;
           overflow-x: hidden;
           padding-bottom: 60px;
+          background: hsl(var(--background));
+        }
+
+        .scanline-overlay {
+          position: fixed;
+          inset: 0;
+          pointer-events: none;
+          background: repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            hsl(var(--foreground) / 0.02) 2px,
+            hsl(var(--foreground) / 0.02) 4px
+          );
+          z-index: 100;
+        }
+
+        .grid-overlay {
+          position: fixed;
+          inset: 0;
+          pointer-events: none;
+          background-image:
+            linear-gradient(hsl(var(--aethex-500) / 0.03) 1px, transparent 1px),
+            linear-gradient(90deg, hsl(var(--aethex-500) / 0.03) 1px, transparent 1px);
+          background-size: 40px 40px;
+          z-index: 1;
+        }
+
+        .cursor-blink {
+          animation: blink 0.8s infinite;
+          color: hsl(var(--aethex-400));
+        }
+
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
         }
 
         .ambient-layer {
@@ -238,6 +315,7 @@ export default function IsometricRealmSelector() {
           inset: 0;
           pointer-events: none;
           overflow: hidden;
+          z-index: 2;
         }
 
         .particle {
@@ -246,70 +324,6 @@ export default function IsometricRealmSelector() {
           filter: blur(1px);
         }
 
-        .selector-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 20px 40px;
-          position: relative;
-          z-index: 10;
-        }
-
-        .header-left {
-          display: flex;
-          align-items: center;
-          gap: 16px;
-        }
-
-        .logo {
-          display: flex;
-          align-items: center;
-          gap: 10px;
-          font-size: 20px;
-          font-weight: 700;
-          letter-spacing: 0.02em;
-        }
-
-        .logo-icon {
-          color: #38bdf8;
-          font-size: 24px;
-        }
-
-        .version-tag {
-          font-size: 11px;
-          padding: 4px 10px;
-          border-radius: 20px;
-          background: rgba(56, 189, 248, 0.1);
-          border: 1px solid rgba(56, 189, 248, 0.2);
-          color: #7dd3fc;
-          letter-spacing: 0.1em;
-        }
-
-        .header-right {
-          display: flex;
-          align-items: center;
-          gap: 16px;
-        }
-
-        .connect-btn {
-          padding: 12px 24px;
-          border-radius: 12px;
-          border: 1px solid #38bdf8;
-          background: rgba(14, 165, 233, 0.1);
-          color: #e0f2fe;
-          font-size: 14px;
-          font-weight: 600;
-          text-decoration: none;
-          transition: all 0.3s ease;
-          backdrop-filter: blur(8px);
-        }
-
-        .connect-btn:hover {
-          background: rgba(14, 165, 233, 0.2);
-          transform: translateY(-2px);
-          box-shadow: 0 8px 20px rgba(14, 165, 233, 0.2);
-        }
-
         .selector-main {
           max-width: 1400px;
           margin: 0 auto;
@@ -323,24 +337,24 @@ export default function IsometricRealmSelector() {
           max-width: 720px;
           margin-left: auto;
           margin-right: auto;
-          background: rgba(15, 23, 42, 0.6);
-          border: 1px solid rgba(124, 58, 237, 0.2);
+          background: hsl(var(--muted) / 0.6);
+          border: 1px solid hsl(var(--aethex-500) / 0.2);
           border-radius: 16px;
           backdrop-filter: blur(12px);
-          box-shadow: 0 0 40px rgba(124, 58, 237, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+          box-shadow: 0 0 40px hsl(var(--aethex-500) / 0.1), inset 0 1px 0 hsl(var(--foreground) / 0.05);
         }
 
         .tagline {
           display: inline-block;
           font-size: 11px;
           font-weight: 700;
-          color: #c084fc;
+          color: hsl(var(--aethex-400));
           text-transform: uppercase;
           letter-spacing: 0.2em;
           margin-bottom: 12px;
           padding: 6px 14px;
-          background: rgba(124, 58, 237, 0.15);
-          border: 1px solid rgba(124, 58, 237, 0.3);
+          background: hsl(var(--aethex-500) / 0.15);
+          border: 1px solid hsl(var(--aethex-500) / 0.3);
           border-radius: 20px;
         }
 
@@ -348,7 +362,7 @@ export default function IsometricRealmSelector() {
           font-size: clamp(32px, 5vw, 48px);
           font-weight: 800;
           margin-bottom: 14px;
-          background: linear-gradient(135deg, #f8fafc 0%, #c084fc 40%, #60a5fa 100%);
+          background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--aethex-400)) 40%, hsl(var(--neon-blue)) 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
@@ -358,7 +372,7 @@ export default function IsometricRealmSelector() {
 
         .sub-headline {
           font-size: 15px;
-          color: #94a3b8;
+          color: hsl(var(--muted-foreground));
           max-width: 480px;
           margin: 0 auto 24px;
           line-height: 1.6;
@@ -374,43 +388,43 @@ export default function IsometricRealmSelector() {
         .cta-primary {
           padding: 12px 28px;
           border-radius: 10px;
-          background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
+          background: linear-gradient(135deg, hsl(var(--aethex-500)) 0%, hsl(var(--aethex-400)) 100%);
           color: white;
           font-size: 13px;
           font-weight: 600;
           text-decoration: none;
           text-transform: uppercase;
           letter-spacing: 0.05em;
-          transition: all 0.3s ease;
-          box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-          border: 1px solid rgba(168, 85, 247, 0.5);
+          transition: all 0.2s ease;
+          box-shadow: 0 0 20px hsl(var(--aethex-500) / 0.4), 0 4px 12px hsl(var(--background) / 0.3);
+          border: 1px solid hsl(var(--aethex-400) / 0.5);
         }
 
         .cta-primary:hover {
           transform: translateY(-2px);
-          box-shadow: 0 0 30px rgba(124, 58, 237, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 30px hsl(var(--aethex-500) / 0.6), 0 8px 20px hsl(var(--background) / 0.4);
         }
 
         .cta-secondary {
           padding: 12px 28px;
           border-radius: 10px;
-          border: 1px solid rgba(96, 165, 250, 0.3);
-          background: rgba(15, 23, 42, 0.8);
-          color: #60a5fa;
+          border: 1px solid hsl(var(--neon-blue) / 0.3);
+          background: hsl(var(--muted) / 0.8);
+          color: hsl(var(--neon-blue));
           font-size: 13px;
           font-weight: 600;
           text-decoration: none;
           text-transform: uppercase;
           letter-spacing: 0.05em;
-          transition: all 0.3s ease;
+          transition: all 0.2s ease;
           backdrop-filter: blur(8px);
         }
 
         .cta-secondary:hover {
-          background: rgba(96, 165, 250, 0.1);
-          border-color: rgba(96, 165, 250, 0.5);
+          background: hsl(var(--neon-blue) / 0.1);
+          border-color: hsl(var(--neon-blue) / 0.5);
           transform: translateY(-2px);
-          box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
+          box-shadow: 0 0 20px hsl(var(--neon-blue) / 0.2);
         }
 
         .hero-text {
@@ -422,14 +436,14 @@ export default function IsometricRealmSelector() {
           font-size: clamp(20px, 3vw, 28px);
           font-weight: 700;
           margin-bottom: 8px;
-          color: #e5e7eb;
+          color: hsl(var(--foreground));
           text-transform: uppercase;
           letter-spacing: 0.1em;
         }
 
         .hero-text p {
           font-size: 14px;
-          color: #64748b;
+          color: hsl(var(--muted-foreground));
           max-width: 400px;
           margin: 0 auto;
         }
@@ -460,84 +474,7 @@ export default function IsometricRealmSelector() {
           }
         }
 
-        .footer-section {
-          margin-top: 80px;
-          padding-top: 40px;
-          border-top: 1px solid #1e293b;
-        }
-
-        .footer-grid {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-          gap: 32px;
-          margin-bottom: 40px;
-        }
-
-        .footer-col h4 {
-          font-size: 13px;
-          font-weight: 600;
-          color: #e5e7eb;
-          margin-bottom: 16px;
-          text-transform: uppercase;
-          letter-spacing: 0.05em;
-        }
-
-        .footer-col a {
-          display: block;
-          font-size: 14px;
-          color: #64748b;
-          text-decoration: none;
-          margin-bottom: 10px;
-          transition: color 0.2s ease;
-        }
-
-        .footer-col a:hover {
-          color: #a855f7;
-        }
-
-        .footer-bottom {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding-top: 24px;
-          border-top: 1px solid #1e293b;
-          flex-wrap: wrap;
-          gap: 16px;
-        }
-
-        .footer-bottom p {
-          font-size: 13px;
-          color: #475569;
-        }
-
-        .footer-links-simple {
-          display: flex;
-          align-items: center;
-          gap: 12px;
-          font-size: 13px;
-        }
-
-        .footer-links-simple a {
-          color: #64748b;
-          text-decoration: none;
-          transition: color 0.2s ease;
-        }
-
-        .footer-links-simple a:hover {
-          color: #e5e7eb;
-        }
-
-        .footer-links-simple .divider {
-          color: #334155;
-        }
-
         @media (max-width: 768px) {
-          .selector-header {
-            padding: 16px 20px;
-            flex-direction: column;
-            gap: 16px;
-          }
-
           .selector-main {
             padding: 20px;
           }
@@ -571,20 +508,6 @@ export default function IsometricRealmSelector() {
           .realms-grid {
             gap: 20px;
           }
-
-          .footer-section {
-            margin-top: 50px;
-          }
-
-          .footer-grid {
-            grid-template-columns: repeat(2, 1fr);
-            gap: 24px;
-          }
-
-          .footer-bottom {
-            flex-direction: column;
-            text-align: center;
-          }
         }
       `}</style>
     </div>