533 lines
24 KiB
TypeScript
533 lines
24 KiB
TypeScript
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useArmTheme } from "@/contexts/ArmThemeContext";
|
|
import {
|
|
Heart,
|
|
BookOpen,
|
|
Code,
|
|
Users,
|
|
Zap,
|
|
ArrowRight,
|
|
GraduationCap,
|
|
Gamepad2,
|
|
Sparkles,
|
|
Trophy,
|
|
Compass,
|
|
ExternalLink,
|
|
} from "lucide-react";
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useEffect, useState, useRef } from "react";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { useArmToast } from "@/hooks/use-arm-toast";
|
|
|
|
export default function Foundation() {
|
|
const navigate = useNavigate();
|
|
const { theme } = useArmTheme();
|
|
const armToast = useArmToast();
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [showTldr, setShowTldr] = useState(false);
|
|
const [showExitModal, setShowExitModal] = useState(false);
|
|
const toastShownRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
if (!toastShownRef.current) {
|
|
armToast.system("Foundation network connected");
|
|
toastShownRef.current = true;
|
|
}
|
|
}, 900);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [armToast]);
|
|
|
|
// Exit intent detection
|
|
useEffect(() => {
|
|
const handleMouseLeave = (e: MouseEvent) => {
|
|
if (e.clientY <= 0 && !showExitModal) {
|
|
setShowExitModal(true);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mouseleave', handleMouseLeave);
|
|
return () => document.removeEventListener('mouseleave', handleMouseLeave);
|
|
}, [showExitModal]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Connecting Foundation Network..."
|
|
showProgress={true}
|
|
duration={900}
|
|
accentColor="from-red-500 to-red-400"
|
|
armLogo="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black">
|
|
{/* Persistent Info Banner */}
|
|
<div className="bg-red-500/10 border-b border-red-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<div className="flex items-center justify-between gap-4 flex-wrap">
|
|
<div className="flex items-center gap-3">
|
|
<ExternalLink className="h-5 w-5 text-red-400" />
|
|
<p className="text-sm text-red-200">
|
|
Foundation is hosted at{" "}
|
|
<a href="https://aethex.foundation" className="underline font-semibold hover:text-red-300">
|
|
aethex.foundation
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
className="bg-red-400 text-black hover:bg-red-300"
|
|
onClick={() => window.location.href = 'https://aethex.foundation'}
|
|
>
|
|
<ExternalLink className="h-4 w-4 mr-2" />
|
|
Visit Foundation
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 max-w-6xl space-y-24 py-16 lg:py-24">
|
|
{/* Hero Section */}
|
|
<div className="text-center space-y-8 animate-slide-down">
|
|
<div className="flex justify-center mb-6">
|
|
<img
|
|
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800"
|
|
alt="Foundation Logo"
|
|
className="h-32 w-32 object-contain drop-shadow-[0_0_50px_rgba(239,68,68,0.5)]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-6 max-w-5xl mx-auto">
|
|
<Badge className="border-red-400/50 bg-red-500/10 text-red-100 text-base px-4 py-1.5">
|
|
<Heart className="h-5 w-5 mr-2" />
|
|
501(c)(3) Non-Profit Organization
|
|
</Badge>
|
|
|
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-red-300 via-pink-300 to-red-300 bg-clip-text text-transparent">
|
|
AeThex Foundation
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
|
501(c)(3) non-profit advancing game development
|
|
</p>
|
|
|
|
{/* TL;DR Section */}
|
|
<div className="max-w-3xl mx-auto">
|
|
<button
|
|
onClick={() => setShowTldr(!showTldr)}
|
|
className="flex items-center gap-2 text-red-400 hover:text-red-300 transition-colors mx-auto"
|
|
>
|
|
<Zap className="h-5 w-5" />
|
|
<span className="font-semibold">{showTldr ? 'Hide' : 'Show'} Quick Summary</span>
|
|
<ArrowRight className={`h-4 w-4 transition-transform ${showTldr ? 'rotate-90' : ''}`} />
|
|
</button>
|
|
{showTldr && (
|
|
<div className="mt-4 p-6 bg-red-950/40 border border-red-400/30 rounded-lg text-left space-y-3 animate-slide-down">
|
|
<h3 className="text-lg font-bold text-red-300">TL;DR</h3>
|
|
<ul className="space-y-2 text-red-100/90">
|
|
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>501(c)(3) non-profit focused on game development</span></li>
|
|
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>GameForge flagship program (30-day sprints)</span></li>
|
|
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>Open-source Axiom Protocol for game dev</span></li>
|
|
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>Master-apprentice mentorship model</span></li>
|
|
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>Community hub at aethex.foundation</span></li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 shadow-[0_0_40px_rgba(239,68,68,0.3)] h-14 px-8 text-lg"
|
|
onClick={() => window.location.href = 'https://aethex.foundation'}
|
|
>
|
|
<ExternalLink className="h-5 w-5 mr-2" />
|
|
Visit Foundation Platform
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-14 px-8 text-lg"
|
|
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
|
>
|
|
<Gamepad2 className="h-5 w-5 mr-2" />
|
|
Join GameForge
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Flagship: GameForge Section */}
|
|
<Card className="bg-gradient-to-br from-green-950/40 via-emerald-950/30 to-green-950/40 border-green-500/40 overflow-hidden">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center gap-3">
|
|
<Gamepad2 className="h-8 w-8 text-green-400" />
|
|
<div>
|
|
<CardTitle className="text-2xl text-white">
|
|
🚀 GameForge: Our Flagship Program
|
|
</CardTitle>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
30-day mentorship sprints where developers ship real games
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{/* What is GameForge? */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
|
<Compass className="h-5 w-5 text-green-400" />
|
|
What is GameForge?
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
GameForge is the Foundation's flagship "master-apprentice"
|
|
mentorship program. It's our "gym" where developers
|
|
collaborate on focused, high-impact game projects within
|
|
30-day sprints. Teams of 5 (1 mentor + 4 mentees) tackle real
|
|
game development challenges and ship playable games to our
|
|
community arcade.
|
|
</p>
|
|
</div>
|
|
|
|
{/* The Triple Win */}
|
|
<div className="space-y-3">
|
|
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
|
<Trophy className="h-5 w-5 text-green-400" />
|
|
Why GameForge Matters
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div className="p-4 bg-black/40 rounded-lg border border-green-500/20 space-y-2">
|
|
<p className="font-semibold text-green-300">
|
|
Role 1: Community
|
|
</p>
|
|
<p className="text-sm text-gray-400">
|
|
Our "campfire" where developers meet, collaborate, and
|
|
build their `aethex.me` passports through real project
|
|
work.
|
|
</p>
|
|
</div>
|
|
<div className="p-4 bg-black/40 rounded-lg border border-green-500/20 space-y-2">
|
|
<p className="font-semibold text-green-300">
|
|
Role 2: Education
|
|
</p>
|
|
<p className="text-sm text-gray-400">
|
|
Learn professional development practices: Code Review
|
|
(SOP-102), Scope Management (KND-001), and shipping
|
|
excellence.
|
|
</p>
|
|
</div>
|
|
<div className="p-4 bg-black/40 rounded-lg border border-green-500/20 space-y-2">
|
|
<p className="font-semibold text-green-300">
|
|
Role 3: Pipeline
|
|
</p>
|
|
<p className="text-sm text-gray-400">
|
|
Top performers become "Architects" ready to work on
|
|
high-value projects. Your GameForge portfolio proves you
|
|
can execute.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* How It Works */}
|
|
<div className="space-y-3">
|
|
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
|
<Zap className="h-5 w-5 text-green-400" />
|
|
How It Works
|
|
</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex gap-3 p-3 bg-black/30 rounded-lg border border-green-500/10">
|
|
<span className="text-green-400 font-bold shrink-0">
|
|
1.
|
|
</span>
|
|
<div>
|
|
<p className="font-semibold text-white text-sm">
|
|
Join a 5-Person Team
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
1 Forge Master (Mentor) + 4 Apprentices (Scripter,
|
|
Builder, Sound, Narrative)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 p-3 bg-black/30 rounded-lg border border-green-500/10">
|
|
<span className="text-green-400 font-bold shrink-0">
|
|
2.
|
|
</span>
|
|
<div>
|
|
<p className="font-semibold text-white text-sm">
|
|
Ship in 30 Days
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
Focused sprint with a strict 1-paragraph GDD. No scope
|
|
creep. Execute with excellence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 p-3 bg-black/30 rounded-lg border border-green-500/10">
|
|
<span className="text-green-400 font-bold shrink-0">
|
|
3.
|
|
</span>
|
|
<div>
|
|
<p className="font-semibold text-white text-sm">
|
|
Ship to the Arcade
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
Your finished game goes live on aethex.fun. Add it to
|
|
your Passport portfolio.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-3 p-3 bg-black/30 rounded-lg border border-green-500/10">
|
|
<span className="text-green-400 font-bold shrink-0">
|
|
4.
|
|
</span>
|
|
<div>
|
|
<p className="font-semibold text-white text-sm">
|
|
Level Up Your Career
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
3 shipped games = Architect status. Qualify for premium
|
|
opportunities on NEXUS.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<Button
|
|
onClick={() => navigate("/gameforge")}
|
|
className="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-12 text-base font-semibold"
|
|
>
|
|
<Gamepad2 className="h-5 w-5 mr-2" />
|
|
Join the Next GameForge Cohort
|
|
<ArrowRight className="h-5 w-5 ml-auto" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Foundation Mission & Values */}
|
|
<div className="space-y-4">
|
|
<h2 className="text-3xl font-bold text-white flex items-center gap-2">
|
|
<Heart className="h-8 w-8 text-red-400" />
|
|
Our Mission
|
|
</h2>
|
|
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20">
|
|
<CardContent className="p-6 space-y-4">
|
|
<p className="text-gray-300 text-lg leading-relaxed">
|
|
The AeThex Foundation is a non-profit organization dedicated
|
|
to advancing game development through community-driven
|
|
mentorship, open-source innovation, and educational
|
|
excellence. We believe that great developers are built, not
|
|
born—and that the future of gaming lies in collaboration,
|
|
transparency, and shared knowledge.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold text-red-300 flex items-center gap-2">
|
|
<Users className="h-5 w-5" />
|
|
Community is Our Core
|
|
</h3>
|
|
<p className="text-sm text-gray-400">
|
|
Building lasting relationships and support networks within
|
|
game development.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold text-red-300 flex items-center gap-2">
|
|
<Code className="h-5 w-5" />
|
|
Open Innovation
|
|
</h3>
|
|
<p className="text-sm text-gray-400">
|
|
Advancing the industry through open-source Axiom Protocol
|
|
and shared tools.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h3 className="font-semibold text-red-300 flex items-center gap-2">
|
|
<GraduationCap className="h-5 w-5" />
|
|
Excellence & Growth
|
|
</h3>
|
|
<p className="text-sm text-gray-400">
|
|
Mentoring developers to ship real products and achieve
|
|
their potential.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Other Programs */}
|
|
<div className="space-y-4">
|
|
<h2 className="text-3xl font-bold text-white flex items-center gap-2">
|
|
<BookOpen className="h-8 w-8 text-red-400" />
|
|
Foundation Programs
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Mentorship Program */}
|
|
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20 hover:border-red-500/40 transition">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Mentorship Network</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-300 text-sm leading-relaxed">
|
|
Learn from industry veterans. Our mentors bring real-world
|
|
experience from studios, indie teams, and AAA development.
|
|
</p>
|
|
<Button
|
|
onClick={() => navigate("/mentorship")}
|
|
variant="outline"
|
|
className="w-full border-red-500/30 text-red-300 hover:bg-red-500/10"
|
|
>
|
|
Learn More <ArrowRight className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Open Source */}
|
|
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20 hover:border-red-500/40 transition">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Axiom Protocol</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-300 text-sm leading-relaxed">
|
|
Our open-source protocol for game development. Contribute,
|
|
learn, and help shape the future of the industry.
|
|
</p>
|
|
<Button
|
|
onClick={() => navigate("/docs")}
|
|
variant="outline"
|
|
className="w-full border-red-500/30 text-red-300 hover:bg-red-500/10"
|
|
>
|
|
Explore Protocol <ArrowRight className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Courses */}
|
|
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20 hover:border-red-500/40 transition">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Learning Paths</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-300 text-sm leading-relaxed">
|
|
Structured curricula covering game design, programming, art,
|
|
sound, and narrative design from basics to advanced.
|
|
</p>
|
|
<Button
|
|
onClick={() => navigate("/docs/curriculum")}
|
|
variant="outline"
|
|
className="w-full border-red-500/30 text-red-300 hover:bg-red-500/10"
|
|
>
|
|
Start Learning <ArrowRight className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Community */}
|
|
<Card className="bg-gradient-to-br from-red-950/40 to-red-900/20 border-red-500/20 hover:border-red-500/40 transition">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl">Community Hub</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-gray-300 text-sm leading-relaxed">
|
|
Connect with developers, share projects, get feedback, and
|
|
build lasting professional relationships.
|
|
</p>
|
|
<Button
|
|
onClick={() => navigate("/community")}
|
|
variant="outline"
|
|
className="w-full border-red-500/30 text-red-300 hover:bg-red-500/10"
|
|
>
|
|
Join Community <ArrowRight className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Call to Action */}
|
|
<Card className="bg-gradient-to-r from-red-600/20 via-pink-600/10 to-red-600/20 border-red-500/40">
|
|
<CardContent className="p-12 text-center space-y-6">
|
|
<div className="space-y-2">
|
|
<h2 className="text-3xl font-bold text-white">
|
|
Ready to Join the Foundation?
|
|
</h2>
|
|
<p className="text-gray-300 text-lg">
|
|
Whether you're looking to learn, mentor others, or contribute
|
|
to open-source game development, there's a place for you here.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
onClick={() => navigate("/gameforge")}
|
|
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-12 px-8 text-base"
|
|
>
|
|
<Gamepad2 className="h-5 w-5 mr-2" />
|
|
Join GameForge Now
|
|
</Button>
|
|
<Button
|
|
onClick={() => navigate("/login")}
|
|
variant="outline"
|
|
className="border-red-500/30 text-red-300 hover:bg-red-500/10 h-12 px-8 text-base"
|
|
>
|
|
Sign In
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Exit Intent Modal */}
|
|
{showExitModal && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in">
|
|
<div className="bg-gradient-to-br from-red-950 to-black border-2 border-red-400/50 rounded-xl p-8 max-w-lg mx-4 shadow-2xl shadow-red-500/20 animate-slide-up">
|
|
<div className="text-center space-y-6">
|
|
<div className="flex justify-center">
|
|
<div className="w-20 h-20 rounded-full bg-red-400/20 flex items-center justify-center">
|
|
<Heart className="h-10 w-10 text-red-400" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<h3 className="text-2xl font-black text-red-300">Join Our Community</h3>
|
|
<p className="text-red-100/80">
|
|
Be part of the AeThex Foundation 501(c)(3) - where developers learn, grow, and ship together.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<Button
|
|
size="lg"
|
|
className="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 h-12"
|
|
onClick={() => window.location.href = 'https://aethex.foundation'}
|
|
>
|
|
<ExternalLink className="h-5 w-5 mr-2" />
|
|
Visit Foundation
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="flex-1 border-red-400/50 text-red-300 hover:bg-red-500/10 h-12"
|
|
onClick={() => setShowExitModal(false)}
|
|
>
|
|
Keep Reading
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|