mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-18 22:37:21 +00:00
414 lines
20 KiB
TypeScript
414 lines
20 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { Link } from "wouter";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { ArrowLeft, Shield, FileCode, Terminal, ChevronRight, Building, GraduationCap, Users, Activity, TrendingUp, Target, Zap, Globe, DollarSign, CheckCircle } from "lucide-react";
|
|
import { AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
|
|
import gridBg from '@assets/generated_images/dark_subtle_digital_grid_texture.png';
|
|
|
|
const growthData = [
|
|
{ month: 'Jan', architects: 12, projects: 3 },
|
|
{ month: 'Feb', architects: 28, projects: 7 },
|
|
{ month: 'Mar', architects: 45, projects: 12 },
|
|
{ month: 'Apr', architects: 67, projects: 18 },
|
|
{ month: 'May', architects: 89, projects: 24 },
|
|
{ month: 'Jun', architects: 120, projects: 31 },
|
|
];
|
|
|
|
const revenueStreams = [
|
|
{ name: 'Aegis Licenses', value: 45 },
|
|
{ name: 'Enterprise Support', value: 25 },
|
|
{ name: 'Certification Fees', value: 20 },
|
|
{ name: 'API Access', value: 10 },
|
|
];
|
|
|
|
const COLORS = ['#eab308', '#22c55e', '#3b82f6', '#8b5cf6'];
|
|
|
|
export default function Pitch() {
|
|
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 relative overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 opacity-10 pointer-events-none z-0"
|
|
style={{ backgroundImage: `url(${gridBg})`, backgroundSize: 'cover' }}
|
|
/>
|
|
|
|
<div className="relative z-10 container mx-auto px-4 py-12 max-w-6xl">
|
|
|
|
<Link href="/">
|
|
<button className="text-muted-foreground hover:text-primary transition-colors flex items-center gap-2 uppercase text-xs tracking-widest mb-12" data-testid="button-return-home">
|
|
<ArrowLeft className="w-4 h-4" /> Return Home
|
|
</button>
|
|
</Link>
|
|
|
|
{/* Title */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<div className="inline-block border border-primary/30 px-3 py-1 text-xs text-primary tracking-widest uppercase mb-6 bg-primary/5">
|
|
The Axiom Protocol
|
|
</div>
|
|
<h1 className="text-4xl md:text-6xl font-display font-bold text-white uppercase tracking-tight mb-4">
|
|
Investor Brief
|
|
</h1>
|
|
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
|
AeThex is a self-sustaining ecosystem built on a dual-entity model that transforms raw talent into certified Metaverse Architects.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* The Dual Entity Model */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="grid md:grid-cols-2 gap-8 mb-20"
|
|
>
|
|
<div className="bg-card/50 border border-secondary/30 p-8 relative overflow-hidden group hover:border-secondary/50 transition-colors">
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-secondary/50" />
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center">
|
|
<GraduationCap className="w-6 h-6 text-secondary" />
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-secondary uppercase tracking-widest font-bold">Non-Profit</div>
|
|
<h3 className="text-xl font-display text-white uppercase">The Foundation</h3>
|
|
</div>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
|
Uses <span className="text-secondary font-bold">The Codex</span> to train elite Architects.
|
|
Gamified curriculum, verified certifications, and a clear path from beginner to master.
|
|
</p>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<FileCode className="w-4 h-4 text-secondary" />
|
|
Codex Standard Certification
|
|
</div>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Users className="w-4 h-4 text-secondary" />
|
|
{metrics?.totalProfiles || 0} Active Architects
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card/50 border border-primary/30 p-8 relative overflow-hidden group hover:border-primary/50 transition-colors">
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-primary/50" />
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
|
|
<Building className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-primary uppercase tracking-widest font-bold">For-Profit</div>
|
|
<h3 className="text-xl font-display text-white uppercase">The Corporation</h3>
|
|
</div>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm leading-relaxed mb-6">
|
|
Builds <span className="text-primary font-bold">The Aegis</span> to secure the Metaverse.
|
|
Enterprise security layer, PII scrubbing, threat intervention—sold to platforms and publishers.
|
|
</p>
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Shield className="w-4 h-4 text-primary" />
|
|
Real-time Security Layer
|
|
</div>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Activity className="w-4 h-4 text-primary" />
|
|
{metrics?.totalProjects || 0} Protected Projects
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* The Holy Trinity */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="mb-20"
|
|
>
|
|
<h2 className="text-center text-sm font-bold text-muted-foreground uppercase tracking-widest mb-8">
|
|
The Holy Trinity
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<Shield className="w-10 h-10 text-primary mx-auto mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2">Axiom</h3>
|
|
<p className="text-xs text-muted-foreground">The Law. The foundational protocol governing the ecosystem.</p>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<FileCode className="w-10 h-10 text-secondary mx-auto mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2">Codex</h3>
|
|
<p className="text-xs text-muted-foreground">The Standard. Certification that proves mastery.</p>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<Terminal className="w-10 h-10 text-destructive mx-auto mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2">Aegis</h3>
|
|
<p className="text-xs text-muted-foreground">The Shield. Real-time protection for builders.</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Growth Charts */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.35 }}
|
|
className="mb-20"
|
|
>
|
|
<h2 className="text-center text-sm font-bold text-muted-foreground uppercase tracking-widest mb-8">
|
|
<TrendingUp className="w-4 h-4 inline mr-2" />
|
|
Growth Trajectory
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div className="bg-card/50 border border-white/10 p-6">
|
|
<h3 className="text-xs text-muted-foreground uppercase tracking-widest mb-4">Architect Enrollment</h3>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<AreaChart data={growthData}>
|
|
<defs>
|
|
<linearGradient id="colorArchitects" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#22c55e" stopOpacity={0.3}/>
|
|
<stop offset="95%" stopColor="#22c55e" stopOpacity={0}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#333" />
|
|
<XAxis dataKey="month" stroke="#666" fontSize={10} />
|
|
<YAxis stroke="#666" fontSize={10} />
|
|
<Tooltip
|
|
contentStyle={{ background: '#1a1a1a', border: '1px solid #333' }}
|
|
labelStyle={{ color: '#fff' }}
|
|
/>
|
|
<Area type="monotone" dataKey="architects" stroke="#22c55e" fillOpacity={1} fill="url(#colorArchitects)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="bg-card/50 border border-white/10 p-6">
|
|
<h3 className="text-xs text-muted-foreground uppercase tracking-widest mb-4">Protected Projects</h3>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart data={growthData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#333" />
|
|
<XAxis dataKey="month" stroke="#666" fontSize={10} />
|
|
<YAxis stroke="#666" fontSize={10} />
|
|
<Tooltip
|
|
contentStyle={{ background: '#1a1a1a', border: '1px solid #333' }}
|
|
labelStyle={{ color: '#fff' }}
|
|
/>
|
|
<Bar dataKey="projects" fill="#eab308" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Revenue Model */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.4 }}
|
|
className="mb-20"
|
|
>
|
|
<h2 className="text-center text-sm font-bold text-muted-foreground uppercase tracking-widest mb-8">
|
|
<DollarSign className="w-4 h-4 inline mr-2" />
|
|
Revenue Model
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 items-center">
|
|
<div className="bg-card/50 border border-white/10 p-6">
|
|
<ResponsiveContainer width="100%" height={250}>
|
|
<PieChart>
|
|
<Pie
|
|
data={revenueStreams}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={60}
|
|
outerRadius={100}
|
|
fill="#8884d8"
|
|
paddingAngle={5}
|
|
dataKey="value"
|
|
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
|
labelLine={false}
|
|
>
|
|
{revenueStreams.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
contentStyle={{ background: '#1a1a1a', border: '1px solid #333' }}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{revenueStreams.map((stream, i) => (
|
|
<div key={stream.name} className="flex items-center gap-4 p-4 bg-card/30 border border-white/5">
|
|
<div className="w-3 h-3 rounded-full" style={{ background: COLORS[i] }} />
|
|
<div className="flex-1">
|
|
<div className="text-white font-bold">{stream.name}</div>
|
|
<div className="text-xs text-muted-foreground">{stream.value}% of projected revenue</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* The Pitch Quote */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.45 }}
|
|
className="bg-primary/5 border border-primary/30 p-10 mb-20"
|
|
>
|
|
<blockquote className="text-xl md:text-2xl text-white leading-relaxed font-display italic">
|
|
"We take raw talent, train them on our laws, and arm them with our weapons.
|
|
<span className="text-primary"> The Foundation creates the workforce; The Corporation sells the security.</span>"
|
|
</blockquote>
|
|
</motion.div>
|
|
|
|
{/* Why Invest */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.5 }}
|
|
className="mb-20"
|
|
>
|
|
<h2 className="text-center text-sm font-bold text-muted-foreground uppercase tracking-widest mb-8">
|
|
<Target className="w-4 h-4 inline mr-2" />
|
|
Why Invest
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div className="p-6 border border-white/10 bg-card/30">
|
|
<Zap className="w-8 h-8 text-primary mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2 text-sm">First Mover</h3>
|
|
<p className="text-xs text-muted-foreground">Building the security standard before the Metaverse matures.</p>
|
|
</div>
|
|
<div className="p-6 border border-white/10 bg-card/30">
|
|
<Users className="w-8 h-8 text-secondary mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2 text-sm">Talent Pipeline</h3>
|
|
<p className="text-xs text-muted-foreground">Self-sustaining workforce trained on proprietary methods.</p>
|
|
</div>
|
|
<div className="p-6 border border-white/10 bg-card/30">
|
|
<Globe className="w-8 h-8 text-blue-500 mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2 text-sm">Platform Agnostic</h3>
|
|
<p className="text-xs text-muted-foreground">Works across any metaverse, game engine, or virtual world.</p>
|
|
</div>
|
|
<div className="p-6 border border-white/10 bg-card/30">
|
|
<Shield className="w-8 h-8 text-destructive mb-4" />
|
|
<h3 className="font-display text-white uppercase mb-2 text-sm">B2B Revenue</h3>
|
|
<p className="text-xs text-muted-foreground">Enterprise licensing model with recurring revenue.</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Live Metrics */}
|
|
{metrics && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.55 }}
|
|
className="mb-20"
|
|
>
|
|
<h2 className="text-center text-sm font-bold text-muted-foreground uppercase tracking-widest mb-8">
|
|
Live Ecosystem Metrics
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="text-4xl font-display font-bold text-primary">{metrics.totalProfiles}</div>
|
|
<div className="text-xs text-muted-foreground uppercase mt-2">Architects</div>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="text-4xl font-display font-bold text-secondary">{metrics.totalProjects}</div>
|
|
<div className="text-xs text-muted-foreground uppercase mt-2">Projects</div>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="text-4xl font-display font-bold text-white">{metrics.totalXP?.toLocaleString()}</div>
|
|
<div className="text-xs text-muted-foreground uppercase mt-2">Total XP</div>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="text-4xl font-display font-bold text-green-500">{metrics.verifiedUsers}</div>
|
|
<div className="text-xs text-muted-foreground uppercase mt-2">Verified</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Team Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.6 }}
|
|
className="mb-20"
|
|
>
|
|
<h2 className="text-center text-sm font-bold text-muted-foreground uppercase tracking-widest mb-8">
|
|
Leadership Team
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="w-20 h-20 bg-primary/20 rounded-full mx-auto mb-4 flex items-center justify-center">
|
|
<span className="text-2xl font-display text-primary">MP</span>
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-1">MrPigLr</h3>
|
|
<div className="text-xs text-primary uppercase tracking-wider mb-3">Founder & CEO</div>
|
|
<p className="text-xs text-muted-foreground">Visionary behind the AeThex ecosystem. 10+ years in game development and metaverse architecture.</p>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="w-20 h-20 bg-secondary/20 rounded-full mx-auto mb-4 flex items-center justify-center">
|
|
<span className="text-2xl font-display text-secondary">AX</span>
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-1">Axiom Lead</h3>
|
|
<div className="text-xs text-secondary uppercase tracking-wider mb-3">Chief Architect</div>
|
|
<p className="text-xs text-muted-foreground">Protocol design and ecosystem governance. Former enterprise software architect.</p>
|
|
</div>
|
|
<div className="text-center p-6 border border-white/10 bg-card/30">
|
|
<div className="w-20 h-20 bg-destructive/20 rounded-full mx-auto mb-4 flex items-center justify-center">
|
|
<span className="text-2xl font-display text-destructive">AG</span>
|
|
</div>
|
|
<h3 className="font-display text-white uppercase mb-1">Aegis Lead</h3>
|
|
<div className="text-xs text-destructive uppercase tracking-wider mb-3">Head of Security</div>
|
|
<p className="text-xs text-muted-foreground">Security engineering and threat intelligence. Background in cybersecurity and AI.</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* CTA */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 0.65 }}
|
|
className="text-center"
|
|
>
|
|
<p className="text-muted-foreground mb-6">
|
|
Ready to learn more about investment opportunities?
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a
|
|
href="mailto:invest@aethex.dev"
|
|
className="inline-block bg-primary text-background px-8 py-4 font-bold uppercase tracking-wider hover:bg-primary/90 transition-colors"
|
|
data-testid="button-contact-team"
|
|
>
|
|
Contact Our Team
|
|
</a>
|
|
<Link href="/terminal">
|
|
<button className="inline-block border border-white/20 text-white px-8 py-4 font-bold uppercase tracking-wider hover:bg-white/5 transition-colors" data-testid="button-see-aegis">
|
|
See Aegis Demo
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|