Enhanced Foundation arm page featuring GameForge as flagship mentorship program
cgen-a2c8bfbf3aeb4380b0439e5cc2be0929
This commit is contained in:
Builder.io
parent
df48783a2b
commit
7f977dc7cd
1 changed files with 347 additions and 439 deletions
|
|
@ -11,6 +11,10 @@ import {
|
||||||
Zap,
|
Zap,
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
GraduationCap,
|
GraduationCap,
|
||||||
|
Gamepad2,
|
||||||
|
Sparkles,
|
||||||
|
Trophy,
|
||||||
|
Compass,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useEffect, useState, useRef } from "react";
|
import { useEffect, useState, useRef } from "react";
|
||||||
|
|
@ -48,454 +52,358 @@ export default function Foundation() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const openSourceProjects = [
|
|
||||||
{
|
|
||||||
name: "AeThex Game Engine",
|
|
||||||
description:
|
|
||||||
"Lightweight, performant game engine optimized for web and native platforms",
|
|
||||||
stars: "2.5K",
|
|
||||||
language: "Rust",
|
|
||||||
link: "github.com/aethex/game-engine",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Roblox Toolkit",
|
|
||||||
description:
|
|
||||||
"Comprehensive library for building professional Roblox experiences",
|
|
||||||
stars: "1.8K",
|
|
||||||
language: "Lua",
|
|
||||||
link: "github.com/aethex/roblox-toolkit",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Developer CLI",
|
|
||||||
description:
|
|
||||||
"Command-line tools for streamlined game development workflow",
|
|
||||||
stars: "1.2K",
|
|
||||||
language: "Go",
|
|
||||||
link: "github.com/aethex/dev-cli",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Multiplayer Framework",
|
|
||||||
description: "Drop-in networking layer for real-time multiplayer games",
|
|
||||||
stars: "980",
|
|
||||||
language: "TypeScript",
|
|
||||||
link: "github.com/aethex/multiplayer",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Asset Pipeline",
|
|
||||||
description:
|
|
||||||
"Automated asset processing and optimization for game development",
|
|
||||||
stars: "750",
|
|
||||||
language: "Python",
|
|
||||||
link: "github.com/aethex/asset-pipeline",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Education Platform",
|
|
||||||
description: "Open-source learning platform for game development courses",
|
|
||||||
stars: "640",
|
|
||||||
language: "JavaScript",
|
|
||||||
link: "github.com/aethex/education",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const workshops = [
|
|
||||||
{
|
|
||||||
title: "Intro to Roblox Development",
|
|
||||||
date: "Every Saturday",
|
|
||||||
duration: "2 hours",
|
|
||||||
level: "Beginner",
|
|
||||||
attendees: "150+/month",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Advanced Game Architecture",
|
|
||||||
date: "Monthly",
|
|
||||||
duration: "4 hours",
|
|
||||||
level: "Advanced",
|
|
||||||
attendees: "50+/month",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Multiplayer Game Design",
|
|
||||||
date: "Bi-weekly",
|
|
||||||
duration: "2 hours",
|
|
||||||
level: "Intermediate",
|
|
||||||
attendees: "100+/month",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const resources = [
|
|
||||||
{
|
|
||||||
title: "Game Development Fundamentals",
|
|
||||||
type: "Video Course",
|
|
||||||
lessons: 50,
|
|
||||||
duration: "20 hours",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Roblox Best Practices Guide",
|
|
||||||
type: "Written Guide",
|
|
||||||
pages: 120,
|
|
||||||
downloads: "10K+",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Architecture Patterns for Games",
|
|
||||||
type: "Interactive Tutorial",
|
|
||||||
modules: 8,
|
|
||||||
projects: 4,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Performance Optimization Handbook",
|
|
||||||
type: "Technical Reference",
|
|
||||||
chapters: 15,
|
|
||||||
code_samples: "100+",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black py-8">
|
||||||
{/* Background */}
|
<div className="container mx-auto px-4 max-w-7xl space-y-12">
|
||||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#ef4444_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
|
|
||||||
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(239,68,68,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
|
||||||
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(239,68,68,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(239,68,68,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
|
|
||||||
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-red-500/20 rounded-full blur-3xl animate-blob" />
|
|
||||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-red-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
|
||||||
|
|
||||||
<main className="relative z-10">
|
|
||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<section className="py-16 lg:py-24">
|
<div className="space-y-6 animate-slide-down">
|
||||||
<div className="container mx-auto max-w-6xl px-4">
|
<div className="space-y-2">
|
||||||
<div className="mb-8 flex justify-center">
|
<Badge className="w-fit bg-red-600/50 text-red-100">
|
||||||
<img
|
Non-Profit Guardian
|
||||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800"
|
|
||||||
alt="Foundation Logo"
|
|
||||||
className="h-24 w-24 object-contain drop-shadow-lg"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Badge className="border-red-400/40 bg-red-500/10 text-red-300 shadow-[0_0_20px_rgba(239,68,68,0.2)] mb-6">
|
|
||||||
<Heart className="h-4 w-4 mr-2" />
|
|
||||||
AeThex Foundation
|
|
||||||
</Badge>
|
</Badge>
|
||||||
|
<h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-red-300 via-pink-300 to-red-300 bg-clip-text text-transparent">
|
||||||
<div className="space-y-6 mb-12">
|
AeThex Foundation
|
||||||
<h1 className={`text-5xl lg:text-7xl font-black text-red-300 leading-tight ${theme.fontClass}`}>
|
</h1>
|
||||||
Community Impact & Talent Pipeline
|
|
||||||
</h1>
|
|
||||||
<p className="text-xl text-red-100/70 max-w-3xl">
|
|
||||||
AeThex Foundation builds goodwill through open-source code
|
|
||||||
(permissive licensing for maximum adoption), educational
|
|
||||||
curriculum, and community workshops. We create a specialized
|
|
||||||
talent pipeline feeding our ecosystem while advancing the
|
|
||||||
broader developer community.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4">
|
|
||||||
<Button
|
|
||||||
className="bg-red-400 text-black hover:bg-red-300"
|
|
||||||
onClick={() => navigate("/foundation/get-involved")}
|
|
||||||
>
|
|
||||||
Contribute
|
|
||||||
<ArrowRight className="ml-2 h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="border-red-400/40 text-red-300 hover:bg-red-500/10"
|
|
||||||
onClick={() => navigate("/foundation/learn-more")}
|
|
||||||
>
|
|
||||||
Learn Free
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Creator Network CTAs */}
|
|
||||||
<div className="mt-8 pt-8 border-t border-red-400/20">
|
|
||||||
<p className="text-sm text-red-200/70 mb-4">
|
|
||||||
Explore our creator community:
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
className="border-red-400/30 text-red-300 hover:bg-red-500/10"
|
|
||||||
onClick={() => navigate("/creators?arm=foundation")}
|
|
||||||
>
|
|
||||||
Browse Community Creators
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="outline"
|
|
||||||
className="border-red-400/30 text-red-300 hover:bg-red-500/10"
|
|
||||||
onClick={() => navigate("/opportunities?arm=foundation")}
|
|
||||||
>
|
|
||||||
View Community Opportunities
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<p className="text-xl text-gray-300 max-w-2xl leading-relaxed">
|
||||||
|
The heart of our ecosystem. We believe in building community,
|
||||||
{/* Open Source Projects */}
|
empowering developers, and advancing game development through
|
||||||
<section className="py-16 border-t border-red-400/10 bg-black/40">
|
open-source innovation and mentorship.
|
||||||
<div className="container mx-auto max-w-6xl px-4">
|
</p>
|
||||||
<h2 className="text-3xl font-bold text-red-300 mb-12 flex items-center gap-2">
|
<div className="flex flex-wrap gap-3">
|
||||||
<Code className="h-8 w-8" />
|
|
||||||
Open Source Projects
|
|
||||||
</h2>
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
||||||
{openSourceProjects.map((project, idx) => (
|
|
||||||
<Card
|
|
||||||
key={idx}
|
|
||||||
className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-all"
|
|
||||||
>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="text-red-300">
|
|
||||||
{project.name}
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<p className="text-sm text-red-200/70">
|
|
||||||
{project.description}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40">
|
|
||||||
⭐ {project.stars}
|
|
||||||
</Badge>
|
|
||||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40">
|
|
||||||
{project.language}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full text-red-300 hover:bg-red-500/10"
|
|
||||||
>
|
|
||||||
View on GitHub →
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Community Workshops */}
|
|
||||||
<section className="py-16">
|
|
||||||
<div className="container mx-auto max-w-6xl px-4">
|
|
||||||
<h2 className="text-3xl font-bold text-red-300 mb-12 flex items-center gap-2">
|
|
||||||
<Users className="h-8 w-8" />
|
|
||||||
Community Workshops
|
|
||||||
</h2>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{workshops.map((workshop, idx) => (
|
|
||||||
<Card
|
|
||||||
key={idx}
|
|
||||||
className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-all"
|
|
||||||
>
|
|
||||||
<CardContent className="pt-6">
|
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
|
||||||
WORKSHOP
|
|
||||||
</p>
|
|
||||||
<h3 className="text-lg font-bold text-red-300">
|
|
||||||
{workshop.title}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
|
||||||
SCHEDULE
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-red-200/80">
|
|
||||||
{workshop.date}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
|
||||||
LEVEL
|
|
||||||
</p>
|
|
||||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40">
|
|
||||||
{workshop.level}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
|
||||||
ATTENDEES
|
|
||||||
</p>
|
|
||||||
<p className="text-sm font-bold text-red-300">
|
|
||||||
{workshop.attendees}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Free Learning Resources */}
|
|
||||||
<section className="py-16 border-t border-red-400/10 bg-black/40">
|
|
||||||
<div className="container mx-auto max-w-6xl px-4">
|
|
||||||
<h2 className="text-3xl font-bold text-red-300 mb-12 flex items-center gap-2">
|
|
||||||
<BookOpen className="h-8 w-8" />
|
|
||||||
Free Learning Resources
|
|
||||||
</h2>
|
|
||||||
<div className="grid md:grid-cols-2 gap-6">
|
|
||||||
{resources.map((resource, idx) => (
|
|
||||||
<Card key={idx} className="bg-red-950/20 border-red-400/30">
|
|
||||||
<CardContent className="pt-6">
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40 mb-3">
|
|
||||||
{resource.type}
|
|
||||||
</Badge>
|
|
||||||
<h3 className="text-lg font-bold text-red-300">
|
|
||||||
{resource.title}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
||||||
{resource.lessons && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Lessons</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.lessons}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.duration && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Duration</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.duration}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.pages && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Pages</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.pages}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.downloads && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Downloads</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.downloads}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.modules && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Modules</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.modules}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.projects && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Projects</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.projects}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.chapters && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">Chapters</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.chapters}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{resource.code_samples && (
|
|
||||||
<div>
|
|
||||||
<p className="text-xs text-red-400">
|
|
||||||
Code Samples
|
|
||||||
</p>
|
|
||||||
<p className="text-red-300 font-semibold">
|
|
||||||
{resource.code_samples}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full text-red-300 hover:bg-red-500/10 mt-3"
|
|
||||||
>
|
|
||||||
Access Free →
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Get Involved */}
|
|
||||||
<section className="py-16">
|
|
||||||
<div className="container mx-auto max-w-6xl px-4">
|
|
||||||
<h2 className="text-3xl font-bold text-red-300 mb-6">
|
|
||||||
Ways to Contribute
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-red-100/80 mb-12 max-w-3xl">
|
|
||||||
Join our community and help us build the future of game
|
|
||||||
development. Whether you're a developer, designer, educator, or
|
|
||||||
enthusiast, there's a place for you.
|
|
||||||
</p>
|
|
||||||
<div className="grid md:grid-cols-3 gap-6">
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
title: "Submit Code",
|
|
||||||
description:
|
|
||||||
"Contribute to our open-source projects on GitHub",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Teach a Workshop",
|
|
||||||
description:
|
|
||||||
"Share your expertise and train the next generation",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Report Issues",
|
|
||||||
description:
|
|
||||||
"Help us improve by finding and reporting bugs",
|
|
||||||
},
|
|
||||||
].map((item, idx) => (
|
|
||||||
<Card key={idx} className="bg-red-950/20 border-red-400/30">
|
|
||||||
<CardContent className="pt-6 text-center">
|
|
||||||
<h3 className="font-bold text-red-300 mb-2">
|
|
||||||
{item.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-sm text-red-200/70">
|
|
||||||
{item.description}
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* CTA */}
|
|
||||||
<section className="py-16 border-t border-red-400/10">
|
|
||||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
|
||||||
<h2 className="text-3xl font-bold text-red-300 mb-4">
|
|
||||||
Ready to Learn or Contribute?
|
|
||||||
</h2>
|
|
||||||
<p className="text-lg text-red-100/80 mb-8">
|
|
||||||
Dive in today and become part of our global developer community.
|
|
||||||
</p>
|
|
||||||
<Button
|
<Button
|
||||||
className="bg-red-400 text-black shadow-[0_0_30px_rgba(239,68,68,0.35)] hover:bg-red-300"
|
onClick={() => navigate("/gameforge")}
|
||||||
onClick={() => navigate("/foundation/get-involved")}
|
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-12 text-base"
|
||||||
>
|
>
|
||||||
Get Started
|
<Gamepad2 className="h-5 w-5 mr-2" />
|
||||||
<ArrowRight className="ml-2 h-4 w-4" />
|
Join GameForge
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => navigate("/mentorship")}
|
||||||
|
variant="outline"
|
||||||
|
className="border-red-500/30 text-red-300 hover:bg-red-500/10 h-12 text-base"
|
||||||
|
>
|
||||||
|
<GraduationCap className="h-5 w-5 mr-2" />
|
||||||
|
Explore Programs
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</main>
|
|
||||||
|
{/* 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>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue