diff --git a/client/pages/Index.tsx b/client/pages/Index.tsx index 3e6ebbca..70dcf71b 100644 --- a/client/pages/Index.tsx +++ b/client/pages/Index.tsx @@ -11,12 +11,9 @@ import { } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import LoadingScreen from "@/components/LoadingScreen"; -import { SkeletonStats, SkeletonUserPath } from "@/components/Skeleton"; import { Link } from "react-router-dom"; -import GamifiedBanner from "@/components/GamifiedBanner"; import { ArrowRight, - CheckCircle, Sparkles, Zap, Target, @@ -25,6 +22,10 @@ import { LayoutDashboard, Microscope, IdCard, + Briefcase, + Code, + BookOpen, + Network, } from "lucide-react"; export default function Index() { @@ -35,7 +36,6 @@ export default function Index() { const timer = setTimeout(() => { setIsLoading(false); }, 1200); - return () => clearTimeout(timer); }, []); @@ -43,7 +43,6 @@ export default function Index() { const interval = setInterval(() => { setActiveSection((prev) => (prev + 1) % 4); }, 4000); - return () => clearInterval(interval); }, []); @@ -51,46 +50,48 @@ export default function Index() { title: string; description: string; icon: any; - color: string; // tailwind gradient from-to + color: string; link?: string; tags?: string[]; }; - const features: FeatureCard[] = [ + // Ecosystem Audience Navigation + const audienceNav = [ { - title: "Game Development", - description: "Full‑cycle production and tooling", + title: "Solutions for Business", + description: "Custom software development, consulting, and digital transformation", + icon: Briefcase, + color: "from-blue-500 to-cyan-500", + link: "/corp", + audience: "Enterprise clients", + }, + { + title: "Explore & Learn", + description: "Open source projects, educational workshops, and community resources", + icon: BookOpen, + color: "from-red-500 to-pink-500", + link: "/foundation", + audience: "Developers & learners", + }, + { + title: "Join the Network", + description: "Professional networking, job board, and portfolio showcase for Roblox devs", + icon: Network, + color: "from-cyan-500 to-blue-500", + link: "/dev-link", + audience: "Individual developers", + }, + { + title: "Careers & Innovation", + description: "Join our team and work on cutting-edge R&D and experimental features", icon: Zap, - color: "from-sky-500 to-indigo-600", - link: "/game-development", - tags: ["Studios", "Tools"], - }, - { - title: "Product Design", - description: "UX/UI, prototyping, and branding", - icon: Target, - color: "from-rose-500 to-fuchsia-600", - link: "/consulting", - tags: ["UX", "Branding"], - }, - { - title: "Platform Engineering", - description: "Web, mobile, and backend foundations", - icon: Users, - color: "from-emerald-500 to-teal-600", - link: "/consulting", - tags: ["Web", "Backend"], - }, - { - title: "Community & Growth", - description: "Programs, content, and engagement", - icon: TrendingUp, - color: "from-amber-500 to-orange-600", - link: "/community", - tags: ["Programs", "Content"], + color: "from-yellow-500 to-amber-500", + link: "/labs", + audience: "Top-tier talent", }, ]; + // Platform Features (Dashboard, Feed, etc.) const platformFeatures: FeatureCard[] = [ { title: "Dashboard", @@ -126,139 +127,38 @@ export default function Index() { }, ]; - const achievements = [ - { metric: "10K+", label: "Active Creators" }, - { metric: "500+", label: "Projects Shipped" }, - { metric: "99.99%", label: "Feature Quality" }, - { metric: "24/7", label: "Global Community" }, - ]; - - const serviceOfferings = [ + // Showcase wins from each division + const showcaseWins = [ { - title: "Game Development", - description: "Studios and indie support", - link: "/game-development", - cardClass: - "border-blue-500/40 bg-gradient-to-br from-blue-950/60 via-indigo-950/30 to-purple-900/40 text-blue-100 hover:border-blue-400/80 hover:shadow-[0_0_25px_rgba(59,130,246,0.35)]", - titleClass: "text-blue-100", - descriptionClass: "text-blue-100/70", - buttonClass: - "bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 hover:from-blue-400 hover:via-indigo-400 hover:to-purple-400 text-white shadow-[0_0_18px_rgba(59,130,246,0.25)]", + division: "Corp", + title: "Enterprise Transformation", + description: "Helped Fortune 500 company modernize their tech stack", + metric: "$2.5M revenue impact", + color: "bg-blue-500/10 border-blue-400/30", }, { - title: "Consulting", - description: "Architecture & delivery", - link: "/consulting", - cardClass: - "border-fuchsia-500/40 bg-gradient-to-br from-fuchsia-950/60 via-rose-950/30 to-purple-900/40 text-fuchsia-100 hover:border-fuchsia-400/80 hover:shadow-[0_0_25px_rgba(217,70,239,0.35)]", - titleClass: "text-fuchsia-100", - descriptionClass: "text-fuchsia-100/70", - buttonClass: - "bg-gradient-to-r from-fuchsia-500 via-pink-500 to-rose-500 hover:from-fuchsia-400 hover:via-pink-400 hover:to-rose-400 text-white shadow-[0_0_18px_rgba(236,72,153,0.25)]", + division: "Foundation", + title: "Community Education", + description: "Launched Roblox development workshop series", + metric: "500+ developers trained", + color: "bg-red-500/10 border-red-400/30", }, { - title: "Mentorship", - description: "Programs and guidance", - link: "/mentorship", - cardClass: - "border-emerald-500/40 bg-gradient-to-br from-emerald-950/60 via-teal-950/30 to-blue-900/40 text-emerald-100 hover:border-emerald-400/80 hover:shadow-[0_0_25px_rgba(16,185,129,0.35)]", - titleClass: "text-emerald-100", - descriptionClass: "text-emerald-100/70", - buttonClass: - "bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 hover:from-emerald-400 hover:via-teal-400 hover:to-cyan-400 text-black font-semibold shadow-[0_0_18px_rgba(20,184,166,0.25)]", + division: "Labs", + title: "AI Innovation", + description: "Breakthrough in procedural game content generation", + metric: "Published research paper", + color: "bg-yellow-500/10 border-yellow-400/30", + }, + { + division: "Dev-Link", + title: "Network Growth", + description: "Reached 10K+ Roblox developers on the platform", + metric: "1000+ jobs posted", + color: "bg-cyan-500/10 border-cyan-400/30", }, ]; - const resourceOfferings = [ - { - title: "Documentation", - description: "Guides and tutorials", - cardClass: - "border-cyan-400/40 bg-gradient-to-br from-cyan-950/50 via-sky-950/25 to-blue-900/30 text-cyan-100 hover:border-cyan-300/70 hover:shadow-[0_0_20px_rgba(34,211,238,0.3)]", - titleClass: "text-cyan-100", - descriptionClass: "text-cyan-100/70", - actions: [ - { - label: "Docs", - href: "/docs", - variant: "outline", - buttonClass: - "border-cyan-400/60 text-cyan-200 hover:bg-cyan-500/10 hover:text-cyan-100", - }, - { - label: "Tutorials", - href: "/docs/tutorials", - variant: "outline", - buttonClass: - "border-cyan-400/60 text-cyan-200 hover:bg-cyan-500/10 hover:text-cyan-100", - }, - ], - }, - { - title: "Community", - description: "News and discussions", - cardClass: - "border-orange-400/40 bg-gradient-to-br from-amber-950/50 via-orange-950/25 to-rose-900/30 text-orange-100 hover:border-orange-300/70 hover:shadow-[0_0_20px_rgba(249,115,22,0.3)]", - titleClass: "text-orange-100", - descriptionClass: "text-orange-100/70", - actions: [ - { - label: "Community", - href: "/community", - variant: "outline", - buttonClass: - "border-orange-400/60 text-orange-200 hover:bg-orange-500/10 hover:text-orange-100", - }, - { - label: "Blog", - href: "/blog", - variant: "outline", - buttonClass: - "border-orange-400/60 text-orange-200 hover:bg-orange-500/10 hover:text-orange-100", - }, - ], - }, - { - title: "Company", - description: "About and contact", - cardClass: - "border-indigo-400/40 bg-gradient-to-br from-indigo-950/50 via-blue-950/25 to-slate-900/30 text-indigo-100 hover:border-indigo-300/70 hover:shadow-[0_0_20px_rgba(99,102,241,0.3)]", - titleClass: "text-indigo-100", - descriptionClass: "text-indigo-100/70", - actions: [ - { - label: "About", - href: "/about", - variant: "outline", - buttonClass: - "border-indigo-400/60 text-indigo-200 hover:bg-indigo-500/10 hover:text-indigo-100", - }, - { - label: "Contact", - href: "/contact", - variant: "outline", - buttonClass: - "border-indigo-400/60 text-indigo-200 hover:bg-indigo-500/10 hover:text-indigo-100", - }, - ], - }, - ]; - - const [homeBanner, setHomeBanner] = useState<{ - text: string; - enabled?: boolean; - style?: string; - } | null>(null); - - useEffect(() => { - fetch("/api/site-settings?key=home_banner") - .then((r) => (r.ok ? r.json() : null)) - .then((v) => { - if (v && typeof v === "object") setHomeBanner(v as any); - }) - .catch(() => void 0); - }, []); - if (isLoading) { return ( - {/* Top Banner (editable via Admin → Operations) */} - {false && ( - - )} - - {/* Hero Section - Geometric Design */} + {/* Hero Section */}
- {/* Geometric Background Pattern */} + {/* Geometric Background */}
- {/* Large Logo-inspired Geometric Shape */}
- {/* Floating Geometric Elements */} {[...Array(20)].map((_, i) => (
- {/* Title */} + {/* Title & Value Prop */}

AeThex

- Crafting Digital Realities + Building the Future of Immersive Digital Experiences

-

- Where vision meets execution. We craft experiences through - design, development, and community. +

+ Software innovation, enterprise consulting, open source education, and professional networking—all in one ecosystem.

- {/* Interactive Features Grid (Services) */} -
- {features.map((feature, index) => { - const Icon = feature.icon; - const isActive = activeSection === index; + {/* Audience Navigation Grid */} +
+ {audienceNav.map((item, index) => { + const Icon = item.icon; return ( - -
- -
-
- -
-

- {feature.title} -

-
- {(feature.tags || []).slice(0, 2).map((tag, i) => ( - - {tag} - - ))} -
-

- {feature.description} -

-
- {feature.link ? ( -
- - Explore - - + +
+ +
+
- ) : null} -
- +
+

+ {item.title} +

+

+ {item.description} +

+ + {item.audience} + +
+
+ + + ); })}
- {/* Platform Feature Cards */} -
- {platformFeatures.map((feature, index) => { - const Icon = feature.icon; - const isActive = activeSection === index; - return ( - -
- -
-
- -
-

- {feature.title} -

-
- {(feature.tags || []).slice(0, 2).map((tag, i) => ( - - {tag} - - ))} -
-

- {feature.description} + {/* Division Showcase */} +

+

Recent Wins

+
+ {showcaseWins.map((win, index) => ( + + + + {win.division} + +

{win.title}

+

+ {win.description} +

+

+ {win.metric}

-
- {feature.link ? ( -
- - Explore - - -
- ) : null} - ); - })} + ))} +
- {/* Action Buttons */} -
+ {/* Platform Features Section */} +
+

Your Platform

+
+ {platformFeatures.map((feature, index) => { + const Icon = feature.icon; + const isActive = activeSection === index; + return ( + +
+ +
+ +
+

+ {feature.title} +

+
+ {(feature.tags || []).slice(0, 2).map((tag, i) => ( + + {tag} + + ))} +
+

+ {feature.description} +

+
+ {feature.link ? ( +
+ + Explore + + +
+ ) : null} + + + ); + })} +
+
+ + {/* CTA Buttons */} +
@@ -489,16 +383,6 @@ export default function Index() { > Explore Platform -