mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-20 23:17:20 +00:00
408 lines
22 KiB
TypeScript
408 lines
22 KiB
TypeScript
import { useEffect } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Link, useLocation } from "wouter";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import {
|
|
Shield, FileCode, Terminal as TerminalIcon, ChevronRight, BarChart3, Network,
|
|
ExternalLink, Lock, Zap, Users, Globe, CheckCircle, ArrowRight, Star,
|
|
Award, Cpu, Building, Sparkles, Monitor
|
|
} from "lucide-react";
|
|
import gridBg from '@assets/generated_images/dark_subtle_digital_grid_texture.png';
|
|
import { useTutorial, homeTutorialSteps, TutorialButton } from "@/components/Tutorial";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
|
|
export default function Home() {
|
|
const { startTutorial, hasCompletedTutorial, isActive } = useTutorial();
|
|
const [, navigate] = useLocation();
|
|
|
|
const { data: metrics } = useQuery({
|
|
queryKey: ["metrics"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/metrics");
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground font-mono selection:bg-primary selection:text-background relative overflow-hidden">
|
|
{/* Mobile Back Button */}
|
|
<button
|
|
onClick={() => navigate('/mobile')}
|
|
className="fixed top-4 left-4 z-50 md:hidden p-3 rounded-full bg-emerald-600 active:bg-emerald-700 shadow-lg"
|
|
>
|
|
<ArrowRight className="w-6 h-6 rotate-180" />
|
|
</button>
|
|
<div
|
|
className="absolute inset-0 opacity-20 pointer-events-none z-0"
|
|
style={{ backgroundImage: `url(${gridBg})`, backgroundSize: 'cover' }}
|
|
/>
|
|
|
|
{/* Navigation */}
|
|
<nav className="relative z-20 flex justify-between items-center px-8 py-6 border-b border-white/5">
|
|
<div className="text-xl font-display font-bold text-white uppercase tracking-widest">
|
|
AeThex
|
|
</div>
|
|
<div className="flex items-center gap-6">
|
|
<a
|
|
href="https://aethex.foundation"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-muted-foreground hover:text-white transition-colors flex items-center gap-1 hidden md:flex"
|
|
>
|
|
Foundation <ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
<a
|
|
href="https://aethex.studio"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-sm text-muted-foreground hover:text-white transition-colors flex items-center gap-1 hidden md:flex"
|
|
>
|
|
Studio <ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
<Link href="/pitch">
|
|
<button className="text-sm text-muted-foreground hover:text-primary transition-colors" data-testid="button-investors">
|
|
Investors
|
|
</button>
|
|
</Link>
|
|
<Link href="/login">
|
|
<button className="text-sm bg-primary/10 border border-primary/30 px-4 py-2 text-primary hover:bg-primary/20 transition-colors flex items-center gap-2" data-testid="button-admin-login">
|
|
<Lock className="w-3 h-3" /> Admin
|
|
</button>
|
|
</Link>
|
|
<ThemeToggle />
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="relative z-10">
|
|
|
|
{/* Hero Section */}
|
|
<div className="container mx-auto px-4 py-20 flex flex-col items-center justify-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-16 space-y-4"
|
|
>
|
|
<div className="inline-block border border-primary/30 px-3 py-1 text-xs text-primary tracking-widest uppercase mb-4 bg-primary/5">
|
|
The Operating System for the Metaverse
|
|
</div>
|
|
<h1 className="text-6xl md:text-8xl font-display font-bold tracking-tighter uppercase text-white mb-2 text-glow">
|
|
AeThex
|
|
</h1>
|
|
<p className="text-muted-foreground text-lg md:text-xl max-w-2xl mx-auto font-tech">
|
|
We train Architects. We build the Shield. We define the Law.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-8">
|
|
<Link href="/os">
|
|
<button className="bg-gradient-to-r from-cyan-500 to-purple-600 text-white px-8 py-4 font-bold uppercase tracking-wider hover:from-cyan-400 hover:to-purple-500 transition-all flex items-center gap-2 shadow-lg shadow-cyan-500/30" data-testid="button-launch-os">
|
|
Launch AeThex OS <Monitor className="w-4 h-4" />
|
|
</button>
|
|
</Link>
|
|
<Link href="/pitch">
|
|
<button className="bg-primary text-background px-8 py-4 font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors flex items-center gap-2" data-testid="button-learn-more">
|
|
Learn More <ArrowRight className="w-4 h-4" />
|
|
</button>
|
|
</Link>
|
|
<Link href="/network">
|
|
<button className="border border-cyan-500/30 text-cyan-500 px-8 py-4 font-bold uppercase tracking-wider hover:bg-cyan-500/10 transition-colors flex items-center gap-2" data-testid="button-view-network">
|
|
View The Network <Network className="w-4 h-4" />
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Live Metrics */}
|
|
{metrics && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16 w-full max-w-4xl"
|
|
data-tutorial="metrics-section"
|
|
>
|
|
<div className="text-center p-4 border border-white/5 bg-card/30 hover:border-primary/30 transition-colors">
|
|
<div className="text-3xl font-display font-bold text-primary">{metrics.totalProfiles}</div>
|
|
<div className="text-xs text-muted-foreground uppercase tracking-wider">Architects</div>
|
|
</div>
|
|
<div className="text-center p-4 border border-white/5 bg-card/30 hover:border-secondary/30 transition-colors">
|
|
<div className="text-3xl font-display font-bold text-secondary">{metrics.totalProjects}</div>
|
|
<div className="text-xs text-muted-foreground uppercase tracking-wider">Projects</div>
|
|
</div>
|
|
<div className="text-center p-4 border border-white/5 bg-card/30 hover:border-green-500/30 transition-colors">
|
|
<div className="text-3xl font-display font-bold text-green-500">{metrics.onlineUsers}</div>
|
|
<div className="text-xs text-muted-foreground uppercase tracking-wider">Online Now</div>
|
|
</div>
|
|
<div className="text-center p-4 border border-white/5 bg-card/30 hover:border-white/30 transition-colors">
|
|
<div className="text-3xl font-display font-bold text-white">{metrics.totalXP?.toLocaleString()}</div>
|
|
<div className="text-xs text-muted-foreground uppercase tracking-wider">Total XP</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
{/* The Trinity Cards */}
|
|
<div className="container mx-auto px-4 pb-20">
|
|
<div className="grid md:grid-cols-3 gap-6 w-full max-w-6xl mx-auto">
|
|
|
|
<Link href="/pitch">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="group relative border border-white/10 bg-card/50 p-8 hover:border-primary/50 transition-colors duration-300 cursor-pointer overflow-hidden h-full"
|
|
data-tutorial="axiom-card"
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="flex justify-between items-start mb-6">
|
|
<Shield className="w-12 h-12 text-muted-foreground group-hover:text-primary transition-colors" />
|
|
<BarChart3 className="w-6 h-6 text-muted-foreground/30 group-hover:text-primary/50 transition-colors" />
|
|
</div>
|
|
<h2 className="text-2xl font-display text-white mb-4">Axiom</h2>
|
|
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
|
<span className="text-primary font-bold">The Law.</span> Our dual-entity protocol creates a self-sustaining ecosystem. The Foundation trains; the Corporation secures.
|
|
</p>
|
|
<div className="flex items-center text-primary hover:text-primary/80 text-sm font-bold uppercase tracking-wider mt-auto">
|
|
View Investor Pitch <ChevronRight className="w-4 h-4 ml-1" />
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
|
|
<a href="https://aethex.foundation" target="_blank" rel="noopener noreferrer" className="block">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="group relative border border-white/10 bg-card/50 p-8 hover:border-secondary/50 transition-colors duration-300 cursor-pointer overflow-hidden h-full"
|
|
data-tutorial="codex-card"
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-secondary/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="flex justify-between items-start mb-6">
|
|
<FileCode className="w-12 h-12 text-muted-foreground group-hover:text-secondary transition-colors" />
|
|
<Network className="w-6 h-6 text-muted-foreground/30 group-hover:text-secondary/50 transition-colors" />
|
|
</div>
|
|
<h2 className="text-2xl font-display text-white mb-4">Codex</h2>
|
|
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
|
<span className="text-secondary font-bold">The Standard.</span> Elite training through gamified curriculum. Certifications that employers trust. The Passport to the Metaverse.
|
|
</p>
|
|
<div className="flex items-center text-secondary hover:text-secondary/80 text-sm font-bold uppercase tracking-wider mt-auto">
|
|
Enter Foundation <ExternalLink className="w-4 h-4 ml-1" />
|
|
</div>
|
|
</motion.div>
|
|
</a>
|
|
|
|
<a href="https://aethex.studio" target="_blank" rel="noopener noreferrer" className="block" data-tutorial="aegis-card">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="group relative border border-white/10 bg-card/50 p-8 hover:border-destructive/50 transition-colors duration-300 cursor-pointer overflow-hidden h-full"
|
|
>
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-destructive/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<TerminalIcon className="w-12 h-12 text-muted-foreground group-hover:text-destructive mb-6 transition-colors" />
|
|
<h2 className="text-2xl font-display text-white mb-4">Aegis</h2>
|
|
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
|
<span className="text-destructive font-bold">The Shield.</span> Real-time security for the build environment. PII scrubbing. Threat intervention. Protection for every line of code.
|
|
</p>
|
|
<div className="flex items-center text-destructive hover:text-destructive/80 text-sm font-bold uppercase tracking-wider mt-auto">
|
|
Launch Studio <ExternalLink className="w-4 h-4 ml-1" />
|
|
</div>
|
|
</motion.div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Section */}
|
|
<div className="border-y border-white/5 bg-card/20 py-20">
|
|
<div className="container mx-auto px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-sm font-bold text-muted-foreground uppercase tracking-widest mb-4">Why AeThex</h2>
|
|
<p className="text-3xl font-display text-white uppercase">Built for the Future</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Zap className="w-8 h-8 text-primary" />
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-2">Real-Time Protection</h3>
|
|
<p className="text-xs text-muted-foreground">Aegis monitors every interaction, scrubbing PII and blocking threats before they reach users.</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Award className="w-8 h-8 text-secondary" />
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-2">Verified Credentials</h3>
|
|
<p className="text-xs text-muted-foreground">Codex certifications are blockchain-verifiable and recognized across the industry.</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.2 }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Globe className="w-8 h-8 text-blue-500" />
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-2">Platform Agnostic</h3>
|
|
<p className="text-xs text-muted-foreground">Works with any engine, any platform, any virtual world. One standard for all.</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: 0.3 }}
|
|
className="text-center"
|
|
>
|
|
<div className="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Users className="w-8 h-8 text-green-500" />
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-2">Elite Community</h3>
|
|
<p className="text-xs text-muted-foreground">Join a network of certified Metaverse Architects building the future together.</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dual Entity Highlight */}
|
|
<div className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div className="text-xs text-secondary uppercase tracking-widest font-bold mb-2">Non-Profit Arm</div>
|
|
<h2 className="text-3xl font-display text-white uppercase mb-4">The Foundation</h2>
|
|
<p className="text-muted-foreground mb-6">
|
|
We believe the Metaverse should be built by trained professionals. The Foundation provides free education,
|
|
gamified learning paths, and verifiable certifications to anyone with the drive to become an Architect.
|
|
</p>
|
|
<ul className="space-y-3">
|
|
<li className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-secondary" /> Free curriculum access
|
|
</li>
|
|
<li className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-secondary" /> XP-based progression
|
|
</li>
|
|
<li className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-secondary" /> Industry-recognized certifications
|
|
</li>
|
|
</ul>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div className="text-xs text-primary uppercase tracking-widest font-bold mb-2">For-Profit Arm</div>
|
|
<h2 className="text-3xl font-display text-white uppercase mb-4">The Corporation</h2>
|
|
<p className="text-muted-foreground mb-6">
|
|
Security shouldn't be an afterthought. The Corporation builds Aegis - the enterprise security layer
|
|
that protects builders and users alike. Real-time threat detection, PII scrubbing, and intervention systems.
|
|
</p>
|
|
<ul className="space-y-3">
|
|
<li className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-primary" /> Enterprise licensing
|
|
</li>
|
|
<li className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-primary" /> 24/7 threat monitoring
|
|
</li>
|
|
<li className="flex items-center gap-3 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-primary" /> API integration
|
|
</li>
|
|
</ul>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Demo Links */}
|
|
<div className="border-t border-white/5 py-20">
|
|
<div className="container mx-auto px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-12"
|
|
>
|
|
<h2 className="text-sm font-bold text-muted-foreground uppercase tracking-widest mb-4">Explore</h2>
|
|
<p className="text-2xl font-display text-white uppercase">See It In Action</p>
|
|
</motion.div>
|
|
|
|
<div className="flex flex-wrap justify-center gap-4" data-tutorial="demo-section">
|
|
<Link href="/passport">
|
|
<button className="text-sm border border-white/10 px-6 py-3 text-muted-foreground hover:text-white hover:border-white/30 transition-colors" data-testid="button-sample-passport">
|
|
View Sample Passport
|
|
</button>
|
|
</Link>
|
|
<Link href="/terminal">
|
|
<button className="text-sm border border-white/10 px-6 py-3 text-muted-foreground hover:text-white hover:border-white/30 transition-colors" data-testid="button-terminal-demo">
|
|
Try Terminal Demo
|
|
</button>
|
|
</Link>
|
|
<Link href="/curriculum">
|
|
<button className="text-sm border border-white/10 px-6 py-3 text-muted-foreground hover:text-white hover:border-white/30 transition-colors" data-testid="button-tech-tree">
|
|
Explore Tech Tree
|
|
</button>
|
|
</Link>
|
|
<Link href="/pitch">
|
|
<button className="text-sm border border-primary/30 px-6 py-3 text-primary hover:bg-primary/10 transition-colors" data-testid="button-investor-deck">
|
|
Investor Deck
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-white/5 py-12">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div className="text-xl font-display font-bold text-white uppercase tracking-widest">
|
|
AeThex
|
|
</div>
|
|
<div className="flex items-center gap-8 text-xs text-muted-foreground">
|
|
<a href="https://aethex.foundation" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Foundation</a>
|
|
<a href="https://aethex.studio" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Studio</a>
|
|
<Link href="/pitch"><span className="hover:text-white transition-colors cursor-pointer">Investors</span></Link>
|
|
<Link href="/login"><span className="hover:text-white transition-colors cursor-pointer">Admin</span></Link>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground/50 uppercase tracking-widest">
|
|
© 2025 AeThex Foundry
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Tutorial Button */}
|
|
{!isActive && (
|
|
<TutorialButton onClick={() => startTutorial(homeTutorialSteps)} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|