AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhanced Foundation arm page featuring GameForge as flagship mentorship program

Browse source 
cgen-a2c8bfbf3aeb4380b0439e5cc2be0929
This commit is contained in:
Builder.io 2025-11-17 08:14:38 +00:00
parent df48783a2b
commit 7f977dc7cd
1 changed files with 347 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

786
client/pages/Foundation.tsx
View file

@ -11,6 +11,10 @@ import {
Zap,
ArrowRight,
GraduationCap,
Gamepad2,
Sparkles,
Trophy,
Compass,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
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 (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Background */}
<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">
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black py-8">
<div className="container mx-auto px-4 max-w-7xl space-y-12">
{/* Hero Section */}
<section className="py-16 lg:py-24">
<div className="container mx-auto max-w-6xl px-4">
<div className="mb-8 flex justify-center">
<img
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
<div className="space-y-6 animate-slide-down">
<div className="space-y-2">
<Badge className="w-fit bg-red-600/50 text-red-100">
Non-Profit Guardian
</Badge>
<div className="space-y-6 mb-12">
<h1 className={`text-5xl lg:text-7xl font-black text-red-300 leading-tight ${theme.fontClass}`}>
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>
<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">
AeThex Foundation
</h1>
</div>
</section>
{/* Open Source Projects */}
<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">
<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>
<p className="text-xl text-gray-300 max-w-2xl leading-relaxed">
The heart of our ecosystem. We believe in building community,
empowering developers, and advancing game development through
open-source innovation and mentorship.
</p>
<div className="flex flex-wrap gap-3">
<Button
className="bg-red-400 text-black shadow-[0_0_30px_rgba(239,68,68,0.35)] hover:bg-red-300"
onClick={() => navigate("/foundation/get-involved")}
onClick={() => navigate("/gameforge")}
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
<ArrowRight className="ml-2 h-4 w-4" />
<Gamepad2 className="h-5 w-5 mr-2" />
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>
</div>
</section>
</main>
</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>
</Layout>
);