Remove unused foundation and gameforge page imports and files
Removes unused imports and page component files for Foundation and GameForge sections from the client application to clean up dead code. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: c3aceb3d-e1df-4755-899c-9004488b190a Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/aPpJgbb Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
96bd6659ac
commit
143b727199
22 changed files with 1 additions and 5196 deletions
|
|
@ -31,14 +31,6 @@ import DevLink from "./pages/DevLink";
|
|||
import DevLinkProfiles from "./pages/DevLinkProfiles";
|
||||
import Nexus from "./pages/Nexus";
|
||||
import Arms from "./pages/Arms";
|
||||
import FoundationTeams from "./pages/foundation/FoundationTeams";
|
||||
import FoundationAbout from "./pages/foundation/FoundationAbout";
|
||||
import LabsExploreResearch from "./pages/labs/LabsExploreResearch";
|
||||
import LabsJoinTeam from "./pages/labs/LabsJoinTeam";
|
||||
import LabsGetInvolved from "./pages/labs/LabsGetInvolved";
|
||||
import GameForgeStartBuilding from "./pages/gameforge/GameForgeStartBuilding";
|
||||
import GameForgeViewPortfolio from "./pages/gameforge/GameForgeViewPortfolio";
|
||||
import GameForgeJoinGameForge from "./pages/gameforge/GameForgeJoinGameForge";
|
||||
import ExternalRedirect from "./components/ExternalRedirect";
|
||||
import CorpScheduleConsultation from "./pages/corp/CorpScheduleConsultation";
|
||||
import CorpViewCaseStudies from "./pages/corp/CorpViewCaseStudies";
|
||||
|
|
|
|||
|
|
@ -1,107 +0,0 @@
|
|||
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 { Heart, Users, BookOpen, Code } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function FoundationAbout() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<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" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative overflow-hidden py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/community")}
|
||||
variant="ghost"
|
||||
className="text-red-300 hover:bg-red-500/10 mb-8"
|
||||
>
|
||||
← Back to Foundation
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-red-300 sm:text-5xl mb-4">
|
||||
About AeThex Foundation
|
||||
</h1>
|
||||
<p className="text-lg text-red-100/80 max-w-2xl">
|
||||
Empowering developers through education and open source
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<div className="rounded-lg border border-red-400/30 bg-red-950/20 p-8 mb-12">
|
||||
<h2 className="text-2xl font-bold text-red-300 mb-4">Our Mission</h2>
|
||||
<p className="text-red-200/80 text-lg leading-relaxed">
|
||||
AeThex Foundation is dedicated to democratizing game development through education, open-source
|
||||
software, and community engagement. We believe that making powerful development tools and knowledge
|
||||
freely available lifts the entire industry and empowers creators of all skill levels.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Values */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="bg-red-950/20 border-red-400/30">
|
||||
<CardHeader>
|
||||
<Heart className="h-8 w-8 text-red-400 mb-2" />
|
||||
<CardTitle className="text-red-300">Community</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-red-200/70">
|
||||
Building inclusive communities of passionate developers
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-red-950/20 border-red-400/30">
|
||||
<CardHeader>
|
||||
<Code className="h-8 w-8 text-red-400 mb-2" />
|
||||
<CardTitle className="text-red-300">Open Source</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-red-200/70">
|
||||
Maintaining and advancing open-source projects
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-red-950/20 border-red-400/30">
|
||||
<CardHeader>
|
||||
<BookOpen className="h-8 w-8 text-red-400 mb-2" />
|
||||
<CardTitle className="text-red-300">Education</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-red-200/70">
|
||||
Creating accessible learning resources for all levels
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-red-950/20 border-red-400/30">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-red-400 mb-2" />
|
||||
<CardTitle className="text-red-300">Mentorship</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-red-200/70">
|
||||
Supporting the next generation of game developers
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,347 +0,0 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowLeft, Award, Loader2, Trophy } from "lucide-react";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
|
||||
interface Achievement {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
points: number;
|
||||
difficulty: "bronze" | "silver" | "gold" | "platinum";
|
||||
category: string;
|
||||
earned_count: number;
|
||||
}
|
||||
|
||||
const difficultyColors: Record<
|
||||
"bronze" | "silver" | "gold" | "platinum",
|
||||
string
|
||||
> = {
|
||||
bronze: "bg-amber-700/20 text-amber-600",
|
||||
silver: "bg-slate-400/20 text-slate-300",
|
||||
gold: "bg-yellow-500/20 text-yellow-400",
|
||||
platinum: "bg-purple-500/20 text-purple-400",
|
||||
};
|
||||
|
||||
const mockAchievements: Achievement[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "First Course Completed",
|
||||
description: "Complete your first Foundation course",
|
||||
icon: "🎓",
|
||||
points: 50,
|
||||
difficulty: "bronze",
|
||||
category: "Learning",
|
||||
earned_count: 1240,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Master Mathematician",
|
||||
description: "Complete all mathematics courses",
|
||||
icon: "🧮",
|
||||
points: 200,
|
||||
difficulty: "silver",
|
||||
category: "Specialty",
|
||||
earned_count: 342,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Game Developer Pro",
|
||||
description: "Complete all game development courses",
|
||||
icon: "🎮",
|
||||
points: 300,
|
||||
difficulty: "gold",
|
||||
category: "Specialty",
|
||||
earned_count: 234,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Knowledge Keeper",
|
||||
description: "Contribute 50 hours of learning content",
|
||||
icon: "📚",
|
||||
points: 150,
|
||||
difficulty: "silver",
|
||||
category: "Community",
|
||||
earned_count: 156,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Legendary Mentor",
|
||||
description: "Mentor 10 students to course completion",
|
||||
icon: "👨🏫",
|
||||
points: 400,
|
||||
difficulty: "platinum",
|
||||
category: "Mentorship",
|
||||
earned_count: 45,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Code Reviewer",
|
||||
description: "Review 100 pieces of student code",
|
||||
icon: "👀",
|
||||
points: 200,
|
||||
difficulty: "gold",
|
||||
category: "Community",
|
||||
earned_count: 89,
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "Weekend Warrior",
|
||||
description: "Complete a course in 7 days or less",
|
||||
icon: "⚡",
|
||||
points: 100,
|
||||
difficulty: "bronze",
|
||||
category: "Speed",
|
||||
earned_count: 567,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "Perfect Score",
|
||||
description: "Achieve 100% on all course assessments",
|
||||
icon: "💯",
|
||||
points: 250,
|
||||
difficulty: "gold",
|
||||
category: "Excellence",
|
||||
earned_count: 123,
|
||||
},
|
||||
];
|
||||
|
||||
const CATEGORIES = [
|
||||
"All",
|
||||
"Learning",
|
||||
"Specialty",
|
||||
"Community",
|
||||
"Mentorship",
|
||||
"Speed",
|
||||
"Excellence",
|
||||
];
|
||||
|
||||
export default function FoundationAchievements() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [userAchievements, setUserAchievements] = useState<string[]>([
|
||||
"1",
|
||||
"3",
|
||||
"7",
|
||||
]); // Mock data
|
||||
|
||||
const filteredAchievements =
|
||||
selectedCategory === "All"
|
||||
? mockAchievements
|
||||
: mockAchievements.filter((a) => a.category === selectedCategory);
|
||||
|
||||
const totalPoints = mockAchievements
|
||||
.filter((a) => userAchievements.includes(a.id))
|
||||
.reduce((sum, a) => sum + a.points, 0);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden pb-12">
|
||||
{/* 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 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-rose-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="border-b border-slate-800 py-8">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/foundation")}
|
||||
className="mb-4 text-slate-400"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Foundation
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Trophy className="h-8 w-8 text-red-400" />
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Achievements</h1>
|
||||
<p className="text-slate-300">
|
||||
Earn badges and unlock rewards
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{user && (
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-slate-400">Total Points</p>
|
||||
<p className="text-3xl font-bold text-red-400">
|
||||
{totalPoints}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
{user && (
|
||||
<section className="border-b border-slate-800 py-6">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-slate-400 mb-1">Achieved</p>
|
||||
<p className="text-2xl font-bold text-red-400">
|
||||
{userAchievements.length}/{mockAchievements.length}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-slate-400 mb-1">
|
||||
Total Points
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-red-400">
|
||||
{totalPoints}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-sm text-slate-400 mb-1">
|
||||
Rarest Badge
|
||||
</p>
|
||||
<p className="text-2xl font-bold text-red-400">
|
||||
Platinum
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Category Filter */}
|
||||
<section className="border-b border-slate-800 py-6">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{CATEGORIES.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-4 py-2 rounded-lg transition ${
|
||||
selectedCategory === category
|
||||
? "bg-red-500/20 text-red-300 border border-red-500/50"
|
||||
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Achievements Grid */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-red-400" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{filteredAchievements.map((achievement) => {
|
||||
const isEarned = userAchievements.includes(achievement.id);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={achievement.id}
|
||||
className={`border-slate-700 transition cursor-pointer ${
|
||||
isEarned
|
||||
? "bg-slate-800/50 hover:border-red-500/50"
|
||||
: "bg-slate-900/50 opacity-60 hover:opacity-80"
|
||||
}`}
|
||||
>
|
||||
<CardContent className="p-6 flex flex-col items-center text-center">
|
||||
<div className="text-5xl mb-4">
|
||||
{achievement.icon}
|
||||
</div>
|
||||
|
||||
<h3 className="font-bold text-white mb-2">
|
||||
{achievement.name}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-slate-400 mb-4">
|
||||
{achievement.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Badge
|
||||
className={
|
||||
difficultyColors[achievement.difficulty]
|
||||
}
|
||||
>
|
||||
{achievement.difficulty.toUpperCase()}
|
||||
</Badge>
|
||||
<Badge className="bg-slate-700/50 text-gray-300">
|
||||
+{achievement.points} pts
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-slate-500">
|
||||
{achievement.earned_count} earned
|
||||
</div>
|
||||
|
||||
{isEarned && (
|
||||
<div className="mt-4 pt-4 border-t border-slate-700 w-full">
|
||||
<Badge className="bg-green-500/20 text-green-300">
|
||||
<Award className="h-3 w-3 mr-1 inline" />
|
||||
Unlocked
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
{!user && (
|
||||
<section className="py-12 border-t border-slate-800">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="p-12 text-center">
|
||||
<Trophy className="h-12 w-12 text-slate-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Start Earning Badges
|
||||
</h3>
|
||||
<p className="text-slate-400 mb-6 max-w-2xl mx-auto">
|
||||
Sign in to track your achievements, earn points, and
|
||||
unlock exclusive rewards as you progress through
|
||||
Foundation courses.
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => navigate("/login")}
|
||||
className="bg-red-500 hover:bg-red-600"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Code,
|
||||
GitBranch,
|
||||
Users,
|
||||
Star,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function FoundationContribute() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const contributionWays = [
|
||||
{
|
||||
icon: Code,
|
||||
title: "Code Contributions",
|
||||
description: "Help develop and improve our open-source projects",
|
||||
ways: [
|
||||
"Submit pull requests",
|
||||
"Fix bugs and issues",
|
||||
"Add new features",
|
||||
"Improve documentation",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Ideas & Feedback",
|
||||
description: "Share your ideas for new features and improvements",
|
||||
ways: [
|
||||
"Report issues",
|
||||
"Suggest features",
|
||||
"Provide user feedback",
|
||||
"Review pull requests",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Community Support",
|
||||
description: "Help other developers in our community",
|
||||
ways: [
|
||||
"Answer questions",
|
||||
"Help on Discord",
|
||||
"Mentor newcomers",
|
||||
"Share knowledge",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Sponsorship",
|
||||
description: "Support our mission financially",
|
||||
ways: [
|
||||
"GitHub sponsorship",
|
||||
"Monthly donations",
|
||||
"Corporate support",
|
||||
"In-kind support",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const projects = [
|
||||
{
|
||||
name: "AeThex Game Engine",
|
||||
description:
|
||||
"Lightweight, performant game engine optimized for web and native platforms",
|
||||
stars: "2.5K",
|
||||
language: "Rust",
|
||||
issues: "12 open",
|
||||
difficulty: "Intermediate",
|
||||
},
|
||||
{
|
||||
name: "Roblox Toolkit",
|
||||
description:
|
||||
"Comprehensive library for building professional Roblox experiences",
|
||||
stars: "1.8K",
|
||||
language: "Lua",
|
||||
issues: "8 open",
|
||||
difficulty: "Beginner",
|
||||
},
|
||||
{
|
||||
name: "Developer CLI",
|
||||
description:
|
||||
"Command-line tools for streamlined game development workflow",
|
||||
stars: "1.2K",
|
||||
language: "Go",
|
||||
issues: "15 open",
|
||||
difficulty: "Intermediate",
|
||||
},
|
||||
{
|
||||
name: "Multiplayer Framework",
|
||||
description: "Drop-in networking layer for real-time multiplayer games",
|
||||
stars: "980",
|
||||
language: "TypeScript",
|
||||
issues: "10 open",
|
||||
difficulty: "Advanced",
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: "1",
|
||||
title: "Fork the Repository",
|
||||
description: "Start by forking the project on GitHub",
|
||||
},
|
||||
{
|
||||
step: "2",
|
||||
title: "Create a Branch",
|
||||
description: "Create a feature branch for your changes",
|
||||
},
|
||||
{
|
||||
step: "3",
|
||||
title: "Make Changes",
|
||||
description: "Implement your improvements or fixes",
|
||||
},
|
||||
{
|
||||
step: "4",
|
||||
title: "Submit Pull Request",
|
||||
description: "Submit your PR with a clear description",
|
||||
},
|
||||
{
|
||||
step: "5",
|
||||
title: "Review & Merge",
|
||||
description: "Community reviews and merges your contribution",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-red-300 hover:bg-red-500/10 mb-8"
|
||||
onClick={() => navigate("/foundation")}
|
||||
>
|
||||
← Back to Foundation
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-red-300 mb-4">
|
||||
Ways to Contribute
|
||||
</h1>
|
||||
<p className="text-lg text-red-100/80 max-w-3xl">
|
||||
Join our community and help us build amazing open-source
|
||||
projects. There are many ways to contribute, regardless of your
|
||||
skill level.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contribution Ways */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-red-300 mb-8">
|
||||
Get Involved
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{contributionWays.map((way, idx) => {
|
||||
const Icon = way.icon;
|
||||
return (
|
||||
<Card key={idx} className="bg-red-950/20 border-red-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<Icon className="h-8 w-8 text-red-400 mb-3" />
|
||||
<h3 className="text-lg font-bold text-red-300 mb-2">
|
||||
{way.title}
|
||||
</h3>
|
||||
<p className="text-sm text-red-200/70 mb-4">
|
||||
{way.description}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{way.ways.map((w, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-center gap-2 text-sm text-red-300"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
|
||||
{w}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How to Contribute */}
|
||||
<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">
|
||||
Contribution Process
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-5 gap-4">
|
||||
{steps.map((item, idx) => (
|
||||
<div key={idx} className="relative">
|
||||
<Card className="bg-red-950/20 border-red-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-pink-500 flex items-center justify-center text-white font-bold mb-3">
|
||||
{item.step}
|
||||
</div>
|
||||
<h3 className="font-bold text-red-300 mb-2 text-sm">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-xs text-red-200/70">
|
||||
{item.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{idx < steps.length - 1 && (
|
||||
<div className="hidden md:block absolute top-1/2 right-0 translate-x-1/2 transform">
|
||||
<ArrowRight className="h-5 w-5 text-red-400/40" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Projects */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-red-300 mb-8">
|
||||
Open Projects
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{projects.map((project, 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 gap-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-red-300 mb-2">
|
||||
{project.name}
|
||||
</h3>
|
||||
<p className="text-sm text-red-200/70 mb-3">
|
||||
{project.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
|
||||
<Star className="h-3 w-3 mr-1" />
|
||||
{project.stars}
|
||||
</Badge>
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
|
||||
{project.language}
|
||||
</Badge>
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
|
||||
{project.issues}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold mb-1">
|
||||
DIFFICULTY
|
||||
</p>
|
||||
<Badge
|
||||
className={`${
|
||||
project.difficulty === "Beginner"
|
||||
? "bg-green-500/20 text-green-300"
|
||||
: project.difficulty === "Intermediate"
|
||||
? "bg-yellow-500/20 text-yellow-300"
|
||||
: "bg-orange-500/20 text-orange-300"
|
||||
} border`}
|
||||
>
|
||||
{project.difficulty}
|
||||
</Badge>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-red-300 hover:bg-red-500/10"
|
||||
>
|
||||
View →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</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 Contribute?
|
||||
</h2>
|
||||
<p className="text-lg text-red-100/80 mb-8">
|
||||
Check out our GitHub repositories and start contributing today.
|
||||
Even small contributions make a big difference!
|
||||
</p>
|
||||
<Button
|
||||
className="bg-red-400 text-black hover:bg-red-300 shadow-[0_0_30px_rgba(239,68,68,0.35)]"
|
||||
onClick={() => navigate("/foundation/learn-more")}
|
||||
>
|
||||
View Learning Resources
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,336 +0,0 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
ArrowLeft,
|
||||
BookOpen,
|
||||
Clock,
|
||||
Users,
|
||||
Search,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
// API Base URL for fetch requests
|
||||
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
||||
|
||||
interface Course {
|
||||
id: string;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
category: string;
|
||||
difficulty: string;
|
||||
instructor_id: string;
|
||||
instructor_name: string;
|
||||
instructor_avatar?: string;
|
||||
cover_image_url: string;
|
||||
estimated_hours: number;
|
||||
}
|
||||
|
||||
const CATEGORIES = [
|
||||
{ value: "game-dev", label: "Game Development" },
|
||||
{ value: "web-dev", label: "Web Development" },
|
||||
{ value: "ai-ml", label: "AI & Machine Learning" },
|
||||
{ value: "design", label: "Design" },
|
||||
{ value: "business", label: "Business" },
|
||||
];
|
||||
|
||||
const DIFFICULTIES = [
|
||||
{ value: "beginner", label: "Beginner" },
|
||||
{ value: "intermediate", label: "Intermediate" },
|
||||
{ value: "advanced", label: "Advanced" },
|
||||
];
|
||||
|
||||
const difficultyColors: Record<string, string> = {
|
||||
beginner: "bg-green-500/20 text-green-300",
|
||||
intermediate: "bg-amber-500/20 text-amber-300",
|
||||
advanced: "bg-red-500/20 text-red-300",
|
||||
};
|
||||
|
||||
export default function FoundationCurriculum() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [search, setSearch] = useState(searchParams.get("search") || "");
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(
|
||||
searchParams.get("category") || null,
|
||||
);
|
||||
const [selectedDifficulty, setSelectedDifficulty] = useState<string | null>(
|
||||
searchParams.get("difficulty") || null,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCourses = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (selectedCategory) params.set("category", selectedCategory);
|
||||
if (selectedDifficulty) params.set("difficulty", selectedDifficulty);
|
||||
|
||||
const response = await fetch(
|
||||
`${API_BASE}/api/foundation/courses?${params}`,
|
||||
);
|
||||
if (!response.ok) throw new Error("Failed to fetch courses");
|
||||
|
||||
let data = await response.json();
|
||||
|
||||
// Client-side filtering by search
|
||||
if (search) {
|
||||
data = data.filter(
|
||||
(course: Course) =>
|
||||
course.title.toLowerCase().includes(search.toLowerCase()) ||
|
||||
course.description.toLowerCase().includes(search.toLowerCase()),
|
||||
);
|
||||
}
|
||||
|
||||
setCourses(data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch courses:", error);
|
||||
setCourses([]);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCourses();
|
||||
}, [selectedCategory, selectedDifficulty]);
|
||||
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set("search", search);
|
||||
if (selectedCategory) params.set("category", selectedCategory);
|
||||
if (selectedDifficulty) params.set("difficulty", selectedDifficulty);
|
||||
setSearchParams(params);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden pb-12">
|
||||
{/* 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 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-rose-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="border-b border-slate-800 py-8">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/foundation")}
|
||||
className="mb-4 text-slate-400"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||||
Back to Foundation
|
||||
</Button>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<BookOpen className="h-8 w-8 text-red-400" />
|
||||
<h1 className="text-3xl font-bold">Curriculum</h1>
|
||||
</div>
|
||||
<p className="text-slate-300">
|
||||
Learn from industry experts with free and premium courses
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search & Filters */}
|
||||
<section className="border-b border-slate-800 py-6">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
{/* Search */}
|
||||
<form onSubmit={handleSearch} className="mb-6">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-500" />
|
||||
<Input
|
||||
placeholder="Search courses..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 bg-slate-800 border-slate-700 text-white"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-slate-300 mb-2">
|
||||
Category
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedCategory(null);
|
||||
setSearchParams({});
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg transition ${
|
||||
selectedCategory === null
|
||||
? "bg-red-500/20 text-red-300 border border-red-500/50"
|
||||
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
||||
}`}
|
||||
>
|
||||
All Categories
|
||||
</button>
|
||||
{CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat.value}
|
||||
onClick={() => {
|
||||
setSelectedCategory(
|
||||
selectedCategory === cat.value ? null : cat.value,
|
||||
);
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg transition ${
|
||||
selectedCategory === cat.value
|
||||
? "bg-red-500/20 text-red-300 border border-red-500/50"
|
||||
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
||||
}`}
|
||||
>
|
||||
{cat.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Difficulty Filter */}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-300 mb-2">
|
||||
Difficulty
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedDifficulty(null);
|
||||
setSearchParams({});
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg transition ${
|
||||
selectedDifficulty === null
|
||||
? "bg-red-500/20 text-red-300 border border-red-500/50"
|
||||
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
||||
}`}
|
||||
>
|
||||
All Levels
|
||||
</button>
|
||||
{DIFFICULTIES.map((diff) => (
|
||||
<button
|
||||
key={diff.value}
|
||||
onClick={() => {
|
||||
setSelectedDifficulty(
|
||||
selectedDifficulty === diff.value ? null : diff.value,
|
||||
);
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg transition ${
|
||||
selectedDifficulty === diff.value
|
||||
? "bg-red-500/20 text-red-300 border border-red-500/50"
|
||||
: "bg-slate-800/50 text-slate-400 border border-slate-700"
|
||||
}`}
|
||||
>
|
||||
{diff.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Courses Grid */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-red-400" />
|
||||
</div>
|
||||
) : courses.length === 0 ? (
|
||||
<Card className="bg-slate-800/30 border-slate-700">
|
||||
<CardContent className="p-12 text-center">
|
||||
<BookOpen className="h-12 w-12 text-slate-600 mx-auto mb-4" />
|
||||
<p className="text-slate-400">
|
||||
No courses found matching your criteria
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{courses.map((course) => (
|
||||
<Card
|
||||
key={course.id}
|
||||
className="bg-slate-800/30 border-slate-700 hover:border-red-500/50 transition overflow-hidden cursor-pointer"
|
||||
onClick={() =>
|
||||
navigate(`/foundation/curriculum/${course.slug}`)
|
||||
}
|
||||
>
|
||||
{course.cover_image_url && (
|
||||
<img
|
||||
src={course.cover_image_url}
|
||||
alt={course.title}
|
||||
className="w-full h-40 object-cover"
|
||||
/>
|
||||
)}
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-white text-lg mb-2">
|
||||
{course.title}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400 line-clamp-2">
|
||||
{course.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Badge
|
||||
className={difficultyColors[course.difficulty]}
|
||||
>
|
||||
{course.difficulty.charAt(0).toUpperCase() +
|
||||
course.difficulty.slice(1)}
|
||||
</Badge>
|
||||
{course.category && (
|
||||
<Badge className="bg-slate-700/50 text-gray-300">
|
||||
{course.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-slate-700 pt-4 text-sm">
|
||||
<div className="flex items-center gap-2 text-slate-300">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>{course.estimated_hours} hours</span>
|
||||
</div>
|
||||
{course.instructor_name && (
|
||||
<div className="flex items-center gap-2 text-slate-300">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>{course.instructor_name}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full mt-4 bg-red-500 hover:bg-red-600"
|
||||
size="sm"
|
||||
>
|
||||
Enroll Now
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,427 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Users,
|
||||
Calendar,
|
||||
MessageSquare,
|
||||
Trophy,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Zap,
|
||||
Heart,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function FoundationGetInvolved() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const involvementWays = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Join the Community",
|
||||
description: "Connect with thousands of developers worldwide",
|
||||
actions: [
|
||||
"Join our Discord server",
|
||||
"Attend community events",
|
||||
"Participate in discussions",
|
||||
"Share your projects",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Calendar,
|
||||
title: "Attend Workshops",
|
||||
description: "Learn from experts in interactive sessions",
|
||||
actions: [
|
||||
"Beginner workshops",
|
||||
"Advanced seminars",
|
||||
"Live coding sessions",
|
||||
"Q&A with experts",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Mentor & Learn",
|
||||
description: "Help others and grow through mentorship",
|
||||
actions: [
|
||||
"Become a mentor",
|
||||
"Find a mentor",
|
||||
"Peer learning groups",
|
||||
"Knowledge sharing",
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Trophy,
|
||||
title: "Showcase Your Work",
|
||||
description: "Get recognition for your projects",
|
||||
actions: [
|
||||
"Submit projects",
|
||||
"Win recognition",
|
||||
"Get featured",
|
||||
"Build your portfolio",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const communityChannels = [
|
||||
{
|
||||
name: "Discord Server",
|
||||
description: "Real-time chat with the community",
|
||||
members: "5K+",
|
||||
status: "Active",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
{
|
||||
name: "GitHub Discussions",
|
||||
description: "Ask questions and share ideas",
|
||||
members: "2K+",
|
||||
status: "Active",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
name: "Monthly Meetups",
|
||||
description: "In-person and virtual meetups",
|
||||
members: "500+",
|
||||
status: "Monthly",
|
||||
icon: Calendar,
|
||||
},
|
||||
{
|
||||
name: "Forum",
|
||||
description: "Deep discussions and long-form posts",
|
||||
members: "3K+",
|
||||
status: "Active",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
];
|
||||
|
||||
const events = [
|
||||
{
|
||||
title: "Game Jam - January 2025",
|
||||
date: "Jan 25-27, 2025",
|
||||
type: "Competition",
|
||||
participants: "200+",
|
||||
prize: "$5K",
|
||||
},
|
||||
{
|
||||
title: "Dev Talk Series",
|
||||
date: "Every 2nd Tuesday",
|
||||
type: "Workshop",
|
||||
participants: "100+",
|
||||
prize: "Certificates",
|
||||
},
|
||||
{
|
||||
title: "Roblox Creator Summit",
|
||||
date: "Mar 15-17, 2025",
|
||||
type: "Conference",
|
||||
participants: "1K+",
|
||||
prize: "Sponsorships",
|
||||
},
|
||||
{
|
||||
title: "Multiplayer Game Hackathon",
|
||||
date: "Feb 8-9, 2025",
|
||||
type: "Competition",
|
||||
participants: "150+",
|
||||
prize: "$3K",
|
||||
},
|
||||
];
|
||||
|
||||
const mentorshipProgram = [
|
||||
{
|
||||
role: "Junior Developer",
|
||||
duration: "12 weeks",
|
||||
description: "Learn game development fundamentals with a mentor",
|
||||
commitment: "5-10 hours/week",
|
||||
},
|
||||
{
|
||||
role: "Intermediate Developer",
|
||||
duration: "8 weeks",
|
||||
description: "Master advanced concepts and best practices",
|
||||
commitment: "3-5 hours/week",
|
||||
},
|
||||
{
|
||||
role: "Advanced Developer",
|
||||
duration: "Ongoing",
|
||||
description: "Mentor others and contribute to major projects",
|
||||
commitment: "2-4 hours/week",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-red-300 hover:bg-red-500/10 mb-8"
|
||||
onClick={() => navigate("/foundation")}
|
||||
>
|
||||
← Back to Foundation
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-red-300 mb-4">
|
||||
Get Involved
|
||||
</h1>
|
||||
<p className="text-lg text-red-100/80 max-w-3xl">
|
||||
Join our thriving community of developers. Whether you're just
|
||||
starting or a seasoned pro, there's a place for you here.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ways to 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-8">
|
||||
Ways to Participate
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{involvementWays.map((way, idx) => {
|
||||
const Icon = way.icon;
|
||||
return (
|
||||
<Card key={idx} className="bg-red-950/20 border-red-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<Icon className="h-8 w-8 text-red-400 mb-3" />
|
||||
<h3 className="text-lg font-bold text-red-300 mb-2">
|
||||
{way.title}
|
||||
</h3>
|
||||
<p className="text-sm text-red-200/70 mb-4">
|
||||
{way.description}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{way.actions.map((action, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-center gap-2 text-sm text-red-300"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
|
||||
{action}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Community Channels */}
|
||||
<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-8">
|
||||
Community Channels
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{communityChannels.map((channel, idx) => {
|
||||
const Icon = channel.icon;
|
||||
return (
|
||||
<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="flex items-start justify-between mb-3">
|
||||
<Icon className="h-6 w-6 text-red-400" />
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
|
||||
{channel.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-red-300 mb-2">
|
||||
{channel.name}
|
||||
</h3>
|
||||
<p className="text-sm text-red-200/70 mb-4">
|
||||
{channel.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
{channel.members} members
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-300 hover:bg-red-500/10"
|
||||
>
|
||||
Join →
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-red-300 mb-8">
|
||||
Upcoming Events
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{events.map((event, 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-5 gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-red-300 mb-1">
|
||||
{event.title}
|
||||
</h3>
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
|
||||
{event.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold mb-1">
|
||||
DATE
|
||||
</p>
|
||||
<p className="text-red-300">{event.date}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold mb-1">
|
||||
PARTICIPANTS
|
||||
</p>
|
||||
<p className="text-red-300">{event.participants}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold mb-1">
|
||||
PRIZE/REWARD
|
||||
</p>
|
||||
<p className="text-red-300 font-semibold">
|
||||
{event.prize}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<Button
|
||||
className="w-full bg-red-400 text-black hover:bg-red-300"
|
||||
size="sm"
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mentorship Program */}
|
||||
<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-8">
|
||||
Mentorship Programs
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{mentorshipProgram.map((program, idx) => (
|
||||
<Card key={idx} className="bg-red-950/20 border-red-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-lg font-bold text-red-300">
|
||||
{program.role}
|
||||
</h3>
|
||||
<Heart className="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<p className="text-sm text-red-200/70 mb-4">
|
||||
{program.description}
|
||||
</p>
|
||||
<div className="space-y-2 pt-4 border-t border-red-400/10">
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
DURATION
|
||||
</p>
|
||||
<p className="text-red-300">{program.duration}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
TIME COMMITMENT
|
||||
</p>
|
||||
<p className="text-red-300">{program.commitment}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full mt-4 bg-red-400 text-black hover:bg-red-300"
|
||||
size="sm"
|
||||
>
|
||||
{idx === 0
|
||||
? "Find a Mentor"
|
||||
: idx === 1
|
||||
? "Upgrade Level"
|
||||
: "Become a Mentor"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Community Stats */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-red-300 mb-8">
|
||||
Our Community
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ label: "Active Members", value: "10K+" },
|
||||
{ label: "Projects Shared", value: "5K+" },
|
||||
{ label: "Monthly Events", value: "20+" },
|
||||
{ label: "Open Issues", value: "500+" },
|
||||
].map((stat, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-red-950/30 border-red-400/40 text-center"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-3xl font-black text-red-400 mb-2">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-sm text-red-200/70">{stat.label}</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 Join?
|
||||
</h2>
|
||||
<p className="text-lg text-red-100/80 mb-8">
|
||||
Whether you want to learn, teach, build, or contribute, there's
|
||||
a community of developers waiting for you.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-red-400 text-black shadow-[0_0_30px_rgba(239,68,68,0.35)] hover:bg-red-300"
|
||||
onClick={() => navigate("/foundation/contribute")}
|
||||
>
|
||||
Start Contributing
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,440 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
BookOpen,
|
||||
Play,
|
||||
FileText,
|
||||
Code,
|
||||
ArrowRight,
|
||||
Download,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function FoundationLearnMore() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const resources = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Game Development Fundamentals",
|
||||
type: "Video Course",
|
||||
icon: Play,
|
||||
description:
|
||||
"Complete introduction to game development concepts and best practices",
|
||||
lessons: "50",
|
||||
duration: "20 hours",
|
||||
topics: ["Game loops", "Physics", "Input handling", "Asset management"],
|
||||
free: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Roblox Best Practices Guide",
|
||||
type: "Written Guide",
|
||||
icon: FileText,
|
||||
description:
|
||||
"Comprehensive guide to building professional Roblox experiences",
|
||||
pages: "120",
|
||||
downloads: "10K+",
|
||||
topics: [
|
||||
"Server architecture",
|
||||
"Security practices",
|
||||
"Performance tips",
|
||||
"UI/UX patterns",
|
||||
],
|
||||
free: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Architecture Patterns for Games",
|
||||
type: "Interactive Tutorial",
|
||||
icon: Code,
|
||||
description:
|
||||
"Learn scalable architectural patterns used in professional game development",
|
||||
modules: "8",
|
||||
projects: "4",
|
||||
topics: ["MVC pattern", "ECS systems", "Networking", "State management"],
|
||||
free: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Performance Optimization Handbook",
|
||||
type: "Technical Reference",
|
||||
icon: BookOpen,
|
||||
description:
|
||||
"In-depth guide to optimizing game performance and reducing latency",
|
||||
chapters: "15",
|
||||
samples: "100+",
|
||||
topics: [
|
||||
"Memory optimization",
|
||||
"GPU optimization",
|
||||
"Network optimization",
|
||||
"Profiling tools",
|
||||
],
|
||||
free: true,
|
||||
},
|
||||
];
|
||||
|
||||
const workshops = [
|
||||
{
|
||||
title: "Intro to Roblox Development",
|
||||
schedule: "Every Saturday",
|
||||
time: "2 hours",
|
||||
level: "Beginner",
|
||||
attendees: "150+/month",
|
||||
nextDate: "Jan 18, 2025",
|
||||
},
|
||||
{
|
||||
title: "Advanced Game Architecture",
|
||||
schedule: "Monthly (2nd Friday)",
|
||||
time: "4 hours",
|
||||
level: "Advanced",
|
||||
attendees: "50+/month",
|
||||
nextDate: "Feb 14, 2025",
|
||||
},
|
||||
{
|
||||
title: "Multiplayer Game Design",
|
||||
schedule: "Bi-weekly (Thursdays)",
|
||||
time: "2 hours",
|
||||
level: "Intermediate",
|
||||
attendees: "100+/month",
|
||||
nextDate: "Jan 23, 2025",
|
||||
},
|
||||
{
|
||||
title: "Performance & Optimization",
|
||||
schedule: "Monthly (3rd Wednesday)",
|
||||
time: "3 hours",
|
||||
level: "Intermediate",
|
||||
attendees: "75+/month",
|
||||
nextDate: "Jan 15, 2025",
|
||||
},
|
||||
];
|
||||
|
||||
const curriculumPaths = [
|
||||
{
|
||||
name: "Beginner Game Developer",
|
||||
duration: "8 weeks",
|
||||
modules: 8,
|
||||
description: "Start your game development journey from scratch",
|
||||
},
|
||||
{
|
||||
name: "Roblox Professional",
|
||||
duration: "12 weeks",
|
||||
modules: 12,
|
||||
description: "Master Roblox development for professional work",
|
||||
},
|
||||
{
|
||||
name: "Multiplayer Expert",
|
||||
duration: "10 weeks",
|
||||
modules: 10,
|
||||
description: "Learn to build complex multiplayer systems",
|
||||
},
|
||||
{
|
||||
name: "Game Architecture Master",
|
||||
duration: "14 weeks",
|
||||
modules: 14,
|
||||
description: "Design scalable systems for production games",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-red-300 hover:bg-red-500/10 mb-8"
|
||||
onClick={() => navigate("/foundation")}
|
||||
>
|
||||
← Back to Foundation
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-red-300 mb-4">
|
||||
Free Learning Resources
|
||||
</h1>
|
||||
<p className="text-lg text-red-100/80 max-w-3xl">
|
||||
Learn game development from the ground up with our free,
|
||||
comprehensive educational resources. Everything you need to
|
||||
become an expert developer.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Resources */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-red-300 mb-8">
|
||||
Featured Resources
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{resources.map((resource) => {
|
||||
const Icon = resource.icon;
|
||||
return (
|
||||
<Card
|
||||
key={resource.id}
|
||||
className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-all"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<Icon className="h-8 w-8 text-red-400" />
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40">
|
||||
{resource.type}
|
||||
</Badge>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-red-300 mb-2">
|
||||
{resource.title}
|
||||
</h3>
|
||||
<p className="text-sm text-red-200/70 mb-4">
|
||||
{resource.description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 mb-4 py-4 border-y border-red-400/10">
|
||||
{resource.lessons && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
LESSONS
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.lessons}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.duration && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
DURATION
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.duration}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.pages && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
PAGES
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.pages}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.downloads && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
DOWNLOADS
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.downloads}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.modules && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
MODULES
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.modules}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.projects && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
PROJECTS
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.projects}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.chapters && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
CHAPTERS
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.chapters}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{resource.samples && (
|
||||
<div>
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
CODE SAMPLES
|
||||
</p>
|
||||
<p className="text-red-300 font-bold">
|
||||
{resource.samples}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-xs text-red-400 font-semibold mb-2">
|
||||
TOPICS
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{resource.topics.map((topic, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs"
|
||||
>
|
||||
{topic}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full bg-red-400 text-black hover:bg-red-300"
|
||||
size="sm"
|
||||
onClick={() => navigate("/foundation/curriculum")}
|
||||
>
|
||||
<Download className="h-4 w-4 mr-2" />
|
||||
Get Resource
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Learning Paths */}
|
||||
<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-8">
|
||||
Learning Paths
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{curriculumPaths.map((path, idx) => (
|
||||
<Card key={idx} className="bg-red-950/20 border-red-400/30">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="text-lg font-bold text-red-300">
|
||||
{path.name}
|
||||
</h3>
|
||||
<Badge className="bg-red-500/20 text-red-300 border border-red-400/40">
|
||||
{path.modules} modules
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-red-200/70 mb-4">
|
||||
{path.description}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-red-400 font-semibold">
|
||||
Duration: {path.duration}
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-300 hover:bg-red-500/10"
|
||||
onClick={() => navigate("/foundation/curriculum")}
|
||||
>
|
||||
Start →
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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-8">
|
||||
Upcoming 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-5 gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
||||
WORKSHOP
|
||||
</p>
|
||||
<p className="font-bold text-red-300">
|
||||
{workshop.title}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
||||
NEXT DATE
|
||||
</p>
|
||||
<p className="text-red-300">{workshop.nextDate}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-red-400 mb-1">
|
||||
DURATION
|
||||
</p>
|
||||
<p className="text-red-300">{workshop.time}</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="flex items-end">
|
||||
<Button
|
||||
className="w-full bg-red-400 text-black hover:bg-red-300"
|
||||
size="sm"
|
||||
onClick={() => navigate("/foundation/curriculum")}
|
||||
>
|
||||
Register
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
Start Your Learning Journey
|
||||
</h2>
|
||||
<p className="text-lg text-red-100/80 mb-8">
|
||||
Choose a learning path and begin mastering game development
|
||||
today. Everything is completely free and open to the community.
|
||||
</p>
|
||||
<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")}
|
||||
>
|
||||
Explore More Ways to Contribute
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
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 { Users, Github, Mail, Linkedin } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const TEAM_MEMBERS = [
|
||||
{
|
||||
name: "Elena Rodriguez",
|
||||
role: "Executive Director",
|
||||
bio: "Leading open-source initiatives and education",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Elena",
|
||||
skills: ["Leadership", "Education", "Community"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
{
|
||||
name: "Michael Chen",
|
||||
role: "Education Lead",
|
||||
bio: "Developing curriculum and learning resources",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Michael",
|
||||
skills: ["Education", "Curriculum", "Training"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
{
|
||||
name: "Sarah Johnson",
|
||||
role: "Community Manager",
|
||||
bio: "Building and nurturing our communities",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
|
||||
skills: ["Community", "Engagement", "Relations"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
{
|
||||
name: "James Park",
|
||||
role: "Open Source Lead",
|
||||
bio: "Maintaining and growing open-source projects",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=James",
|
||||
skills: ["Open Source", "Development", "Governance"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
];
|
||||
|
||||
export default function FoundationTeams() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<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" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative overflow-hidden py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/community")}
|
||||
variant="ghost"
|
||||
className="text-red-300 hover:bg-red-500/10 mb-8"
|
||||
>
|
||||
← Back to Foundation
|
||||
</Button>
|
||||
|
||||
<div className="mb-12">
|
||||
<Badge className="border-red-400/40 bg-red-500/10 text-red-300 mb-4">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Our Team
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black tracking-tight text-red-300 sm:text-5xl mb-4">
|
||||
Meet the Foundation Team
|
||||
</h1>
|
||||
<p className="text-lg text-red-100/80 max-w-2xl">
|
||||
Dedicated to open source and community education
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Grid */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
{TEAM_MEMBERS.map((member) => (
|
||||
<Card
|
||||
key={member.name}
|
||||
className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 hover:bg-red-950/30 transition-all"
|
||||
>
|
||||
<CardHeader className="text-center">
|
||||
<img
|
||||
src={member.avatar}
|
||||
alt={member.name}
|
||||
className="w-20 h-20 rounded-full mx-auto mb-4 border-2 border-red-400/50"
|
||||
/>
|
||||
<CardTitle className="text-red-300">{member.name}</CardTitle>
|
||||
<p className="text-sm text-red-200/70 mt-1">{member.role}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-red-200/70">{member.bio}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.skills.map((skill) => (
|
||||
<Badge
|
||||
key={skill}
|
||||
className="bg-red-500/20 text-red-300 border-0 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<a href={member.social.github} className="text-red-400 hover:text-red-300">
|
||||
<Github className="h-5 w-5" />
|
||||
</a>
|
||||
<a href={member.social.linkedin} className="text-red-400 hover:text-red-300">
|
||||
<Linkedin className="h-5 w-5" />
|
||||
</a>
|
||||
<a href={member.social.email} className="text-red-400 hover:text-red-300">
|
||||
<Mail className="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Hiring Section */}
|
||||
<div className="rounded-lg border border-red-400/30 bg-red-950/20 p-8 text-center">
|
||||
<h2 className="text-2xl font-bold text-red-300 mb-4">Join the Foundation</h2>
|
||||
<p className="text-red-200/80 mb-6 max-w-2xl mx-auto">
|
||||
Help us empower developers and build amazing open-source software
|
||||
</p>
|
||||
<Button className="bg-red-400 text-black hover:bg-red-300">
|
||||
View Open Positions
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
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 { Heart, Rocket, Target, Globe } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function GameForgeAbout() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const milestones = [
|
||||
{
|
||||
year: 2020,
|
||||
title: "GameForge Founded",
|
||||
description:
|
||||
"Born from a frustration with fragmented game development tools, we set out to create something better.",
|
||||
},
|
||||
{
|
||||
year: 2021,
|
||||
title: "First 1000 Developers",
|
||||
description:
|
||||
"Reached our first major milestone with developers from 50+ countries using GameForge.",
|
||||
},
|
||||
{
|
||||
year: 2022,
|
||||
title: "Monthly Shipping Model",
|
||||
description:
|
||||
"Launched our signature monthly shipping cycles helping developers release faster.",
|
||||
},
|
||||
{
|
||||
year: 2023,
|
||||
title: "100+ Games Shipped",
|
||||
description:
|
||||
"Celebrated as our community shipped over 100 games through the platform.",
|
||||
},
|
||||
{
|
||||
year: 2024,
|
||||
title: "Global Expansion",
|
||||
description:
|
||||
"Expanded to support multiple languages and localization for worldwide developers.",
|
||||
},
|
||||
];
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: <Heart className="h-8 w-8 text-green-400" />,
|
||||
title: "Creator First",
|
||||
description:
|
||||
"Everything we build is designed with developers and creators in mind. Your success is our success.",
|
||||
},
|
||||
{
|
||||
icon: <Rocket className="h-8 w-8 text-green-400" />,
|
||||
title: "Speed & Momentum",
|
||||
description:
|
||||
"We believe in rapid iteration and shipping fast. Monthly cycles keep your games fresh and your players engaged.",
|
||||
},
|
||||
{
|
||||
icon: <Target className="h-8 w-8 text-green-400" />,
|
||||
title: "Quality Obsessed",
|
||||
description:
|
||||
"High standards across everything. From tools to community, we maintain excellence in every detail.",
|
||||
},
|
||||
{
|
||||
icon: <Globe className="h-8 w-8 text-green-400" />,
|
||||
title: "Open Community",
|
||||
description:
|
||||
"We believe in the power of community. Together, we build stronger games and support each other.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_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(34,197,94,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(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,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-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16 lg:py-20">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
|
||||
<Rocket className="h-4 w-4 mr-2" />
|
||||
Our Story
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Building the Future of Game Development
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-3xl">
|
||||
GameForge was born from a simple belief: game development should
|
||||
be fast, accessible, and community-driven. We're on a mission to
|
||||
empower creators worldwide to build amazing games.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission & Vision */}
|
||||
<section className="py-16 border-y border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Our Mission
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-4">
|
||||
To democratize game development by providing tools,
|
||||
resources, and community support that enable anyone to
|
||||
create and ship games at scale.
|
||||
</p>
|
||||
<p className="text-lg text-green-100/80">
|
||||
We believe that great games come from passionate creators.
|
||||
Our job is to remove barriers and accelerate their journey
|
||||
from idea to shipped product.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Our Vision
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-4">
|
||||
A world where game development is accessible, fast, and
|
||||
collaborative. Where indie developers have the same tools
|
||||
and support as major studios.
|
||||
</p>
|
||||
<p className="text-lg text-green-100/80">
|
||||
We're building a platform where monthly shipping cycles are
|
||||
the norm, where community support accelerates growth, and
|
||||
where every creator has the chance to succeed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Values */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-12">
|
||||
Our Core Values
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">{value.icon}</div>
|
||||
<CardTitle className="text-green-300 text-xl">
|
||||
{value.title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/70">{value.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timeline */}
|
||||
<section className="py-16 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-12">
|
||||
Our Journey
|
||||
</h2>
|
||||
<div className="space-y-8">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<div key={idx} className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-4 h-4 rounded-full bg-green-400 border-4 border-black" />
|
||||
{idx < milestones.length - 1 && (
|
||||
<div className="w-1 h-24 bg-gradient-to-b from-green-400 to-transparent" />
|
||||
)}
|
||||
</div>
|
||||
<div className="pb-8">
|
||||
<Badge className="bg-green-500/20 border border-green-400/40 text-green-300 mb-2">
|
||||
{milestone.year}
|
||||
</Badge>
|
||||
<h3 className="text-xl font-bold text-green-300 mb-2">
|
||||
{milestone.title}
|
||||
</h3>
|
||||
<p className="text-green-200/70">
|
||||
{milestone.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ value: "50K+", label: "Developers" },
|
||||
{ value: "150+", label: "Games Shipped" },
|
||||
{ value: "75+", label: "Countries" },
|
||||
{ value: "99.9%", label: "Uptime" },
|
||||
].map((stat, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/30 border-green-400/40 text-center"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-4xl font-black text-green-400 mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<p className="text-green-200/70">{stat.label}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<section className="py-16 border-t border-green-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Join the Movement
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Be part of something bigger. Join thousands of developers
|
||||
building the future of games.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
|
||||
Start Building Today
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,352 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Users,
|
||||
Zap,
|
||||
Heart,
|
||||
ArrowRight,
|
||||
Rocket,
|
||||
Gamepad2,
|
||||
Trophy,
|
||||
Code,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function GameForgeJoinGameForge() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const joinPaths = [
|
||||
{
|
||||
icon: <Gamepad2 className="h-6 w-6" />,
|
||||
title: "Create a Studio",
|
||||
description:
|
||||
"Start a new game studio and ship monthly games with full support from AeThex",
|
||||
action: "Set Up Studio",
|
||||
actionPath: "/teams",
|
||||
},
|
||||
{
|
||||
icon: <Code className="h-6 w-6" />,
|
||||
title: "Join Existing Project",
|
||||
description:
|
||||
"Contribute to active game projects and collaborate with talented developers",
|
||||
action: "Browse Projects",
|
||||
actionPath: "/projects",
|
||||
},
|
||||
{
|
||||
icon: <Rocket className="h-6 w-6" />,
|
||||
title: "Apply as Developer",
|
||||
description:
|
||||
"Join GameForge as a core team member and help ship games every month",
|
||||
action: "View Positions",
|
||||
actionPath: "/careers",
|
||||
},
|
||||
];
|
||||
|
||||
const requirements = [
|
||||
{
|
||||
title: "Commitment",
|
||||
items: [
|
||||
"Ability to ship a complete game or feature monthly",
|
||||
"Active participation in collaboration and planning",
|
||||
"Willingness to learn and adapt quickly",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Skills",
|
||||
items: [
|
||||
"Game development experience (programming, design, art, etc.)",
|
||||
"Understanding of game design principles",
|
||||
"Ability to work in cross-functional teams",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Mindset",
|
||||
items: [
|
||||
"Ship-focused mentality - done over perfect",
|
||||
"Collaborative approach to problem-solving",
|
||||
"Passion for game development and players",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "1",
|
||||
title: "Explore",
|
||||
description: "Browse current projects and studios on AeThex GameForge",
|
||||
},
|
||||
{
|
||||
number: "2",
|
||||
title: "Apply or Create",
|
||||
description:
|
||||
"Apply to a project team or create your own studio with a founding team",
|
||||
},
|
||||
{
|
||||
number: "3",
|
||||
title: "Onboard",
|
||||
description: "Get integrated into the community and start collaborating",
|
||||
},
|
||||
{
|
||||
number: "4",
|
||||
title: "Ship",
|
||||
description:
|
||||
"Work with your team to deliver your first game or update within a month",
|
||||
},
|
||||
];
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: <Zap className="h-6 w-6" />,
|
||||
title: "Monthly Shipping Cycles",
|
||||
description:
|
||||
"Release complete games or major updates every month. Fast feedback, real results.",
|
||||
},
|
||||
{
|
||||
icon: <Heart className="h-6 w-6" />,
|
||||
title: "Supportive Community",
|
||||
description:
|
||||
"Network with other game developers, studios, and industry professionals.",
|
||||
},
|
||||
{
|
||||
icon: <Trophy className="h-6 w-6" />,
|
||||
title: "Recognition & Rewards",
|
||||
description:
|
||||
"Get featured in GameForge showcase, earn achievements, and build your portfolio.",
|
||||
},
|
||||
{
|
||||
icon: <Users className="h-6 w-6" />,
|
||||
title: "Collaboration Tools",
|
||||
description:
|
||||
"Access to AeThex infrastructure, project management, and team coordination tools.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_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(34,197,94,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(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,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-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 border-b border-green-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-5xl lg:text-6xl font-black text-green-300">
|
||||
Join GameForge
|
||||
</h1>
|
||||
<p className="text-xl text-green-100/80 max-w-3xl">
|
||||
Ship complete games every month. GameForge is where game
|
||||
studios and developers collaborate to create, iterate, and
|
||||
ship on a monthly cadence. Join existing projects, create your
|
||||
own studio, or contribute as a developer.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 pt-4">
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
|
||||
Monthly Shipping
|
||||
</Badge>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
|
||||
Collaborative Teams
|
||||
</Badge>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
|
||||
Full Lifecycle Support
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Join Paths */}
|
||||
<section className="py-20 border-b border-green-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
How to Join
|
||||
</h2>
|
||||
<p className="text-green-100/70 mb-12 max-w-2xl">
|
||||
Whether you're a solo developer or leading a studio, there's a
|
||||
path for you in GameForge.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{joinPaths.map((path, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/50 transition-colors"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-green-400 mb-4">{path.icon}</div>
|
||||
<h3 className="text-lg font-bold text-green-300 mb-2">
|
||||
{path.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70 mb-6">
|
||||
{path.description}
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10 w-full"
|
||||
onClick={() => navigate(path.actionPath)}
|
||||
>
|
||||
{path.action}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="py-20 border-b border-green-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-12">
|
||||
Benefits of Joining GameForge
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{benefits.map((benefit, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-green-400 mb-4">{benefit.icon}</div>
|
||||
<h3 className="font-bold text-green-300 mb-2">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{benefit.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Requirements */}
|
||||
<section className="py-20 border-b border-green-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-12">
|
||||
What We're Looking For
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{requirements.map((req, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-bold text-green-300 mb-4">
|
||||
{req.title}
|
||||
</h3>
|
||||
<ul className="space-y-2">
|
||||
{req.items.map((item, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="text-sm text-green-200/70 flex gap-2"
|
||||
>
|
||||
<span className="text-green-400 flex-shrink-0">
|
||||
✓
|
||||
</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Process */}
|
||||
<section className="py-20 border-b border-green-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-12">
|
||||
Getting Started
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{steps.map((step, idx) => (
|
||||
<div key={idx} className="flex gap-6">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-500 text-black font-bold">
|
||||
{step.number}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 pt-1">
|
||||
<h3 className="font-bold text-green-300 mb-2">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-green-200/70">{step.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 p-6 rounded-lg border border-green-400/30 bg-green-950/20">
|
||||
<h3 className="font-bold text-green-300 mb-2">
|
||||
First Month Timeline
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Week 1: Onboarding & team setup. Week 2-3: Development &
|
||||
collaboration. Week 4: Polish & ship your first game or
|
||||
update.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-4xl font-bold text-green-300 mb-4">
|
||||
Ready to Ship?
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Join GameForge and start building with a community of passionate
|
||||
game developers.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Button
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
size="lg"
|
||||
onClick={() => navigate("/projects")}
|
||||
>
|
||||
Browse Projects
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/teams")}
|
||||
>
|
||||
Create or Join a Team
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,263 +0,0 @@
|
|||
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 { Check, X, DollarSign, Zap } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface PricingTier {
|
||||
id: number;
|
||||
name: string;
|
||||
price: string | number;
|
||||
period: string;
|
||||
description: string;
|
||||
cta: string;
|
||||
highlighted: boolean;
|
||||
features: {
|
||||
name: string;
|
||||
included: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
const PRICING_TIERS: PricingTier[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Indie",
|
||||
price: "Free",
|
||||
period: "Forever",
|
||||
description: "Perfect for solo developers and small projects",
|
||||
cta: "Get Started",
|
||||
highlighted: false,
|
||||
features: [
|
||||
{ name: "Up to 2 published games", included: true },
|
||||
{ name: "Community support", included: true },
|
||||
{ name: "Basic game templates", included: true },
|
||||
{ name: "Monthly shipping", included: false },
|
||||
{ name: "Revenue sharing", included: false },
|
||||
{ name: "Priority support", included: false },
|
||||
{ name: "Premium assets library", included: false },
|
||||
{ name: "Dedicated manager", included: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Studio",
|
||||
price: "$29",
|
||||
period: "/month",
|
||||
description: "For small studios scaling their operations",
|
||||
cta: "Start Free Trial",
|
||||
highlighted: true,
|
||||
features: [
|
||||
{ name: "Up to 10 published games", included: true },
|
||||
{ name: "Community support", included: true },
|
||||
{ name: "Basic game templates", included: true },
|
||||
{ name: "Monthly shipping", included: true },
|
||||
{ name: "Revenue sharing (70/30)", included: true },
|
||||
{ name: "Priority support", included: true },
|
||||
{ name: "Premium assets library", included: true },
|
||||
{ name: "Dedicated manager", included: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Enterprise",
|
||||
price: "Custom",
|
||||
period: "Pricing",
|
||||
description: "For established studios with custom needs",
|
||||
cta: "Contact Sales",
|
||||
highlighted: false,
|
||||
features: [
|
||||
{ name: "Unlimited published games", included: true },
|
||||
{ name: "Community support", included: true },
|
||||
{ name: "Basic game templates", included: true },
|
||||
{ name: "Monthly shipping", included: true },
|
||||
{ name: "Revenue sharing (custom)", included: true },
|
||||
{ name: "Priority support", included: true },
|
||||
{ name: "Premium assets library", included: true },
|
||||
{ name: "Dedicated manager", included: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function GameForgePricing() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_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(34,197,94,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(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,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-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16 lg:py-20">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
|
||||
<DollarSign className="h-4 w-4 mr-2" />
|
||||
Simple, Transparent Pricing
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Choose Your Plan
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Get started free and scale as you grow. No hidden fees, no
|
||||
surprises.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{PRICING_TIERS.map((tier) => (
|
||||
<Card
|
||||
key={tier.id}
|
||||
className={`relative border transition-all ${
|
||||
tier.highlighted
|
||||
? "border-green-400/60 bg-green-950/30 shadow-lg shadow-green-500/20 scale-105"
|
||||
: "border-green-400/30 bg-green-950/20 hover:border-green-400/60"
|
||||
}`}
|
||||
>
|
||||
{tier.highlighted && (
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<Badge className="bg-green-400 text-black">
|
||||
Most Popular
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CardHeader className="pb-6">
|
||||
<CardTitle className="text-2xl text-green-300">
|
||||
{tier.name}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-green-200/70 mt-2">
|
||||
{tier.description}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Price */}
|
||||
<div className="py-6 border-y border-green-400/10">
|
||||
<div className="text-4xl font-black text-green-300">
|
||||
{tier.price}
|
||||
</div>
|
||||
<p className="text-sm text-green-200/60 mt-1">
|
||||
{tier.period}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<Button
|
||||
className={`w-full ${
|
||||
tier.highlighted
|
||||
? "bg-green-400 text-black hover:bg-green-300"
|
||||
: "border border-green-400/60 text-green-300 hover:bg-green-500/10"
|
||||
}`}
|
||||
>
|
||||
{tier.cta}
|
||||
</Button>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-3">
|
||||
{tier.features.map((feature, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-3 text-sm"
|
||||
>
|
||||
{feature.included ? (
|
||||
<Check className="h-5 w-5 text-green-400 flex-shrink-0" />
|
||||
) : (
|
||||
<X className="h-5 w-5 text-green-900 flex-shrink-0" />
|
||||
)}
|
||||
<span
|
||||
className={
|
||||
feature.included
|
||||
? "text-green-100"
|
||||
: "text-green-200/40"
|
||||
}
|
||||
>
|
||||
{feature.name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-16 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8 text-center">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
q: "Can I upgrade or downgrade anytime?",
|
||||
a: "Yes, you can change your plan at any time. Changes take effect immediately.",
|
||||
},
|
||||
{
|
||||
q: "Is there a setup or hidden fees?",
|
||||
a: "No hidden fees. Only pay for the plan you choose. Setup is completely free.",
|
||||
},
|
||||
{
|
||||
q: "What happens if I stop paying?",
|
||||
a: "Your games remain available to play, but you won't be able to publish new updates until you re-subscribe.",
|
||||
},
|
||||
{
|
||||
q: "Do you offer discounts for annual billing?",
|
||||
a: "Yes! Save 20% when you pay annually. Contact our sales team for more details.",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-4 rounded border border-green-400/20 hover:border-green-400/40 transition-colors bg-green-950/10"
|
||||
>
|
||||
<h3 className="font-semibold text-green-300 mb-2">
|
||||
{item.q}
|
||||
</h3>
|
||||
<p className="text-green-200/70 text-sm">{item.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Join thousands of developers building amazing games on
|
||||
GameForge.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300 px-8 py-6">
|
||||
<Zap className="mr-2 h-5 w-5" />
|
||||
Start Free Today
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,333 +0,0 @@
|
|||
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 {
|
||||
CheckCircle,
|
||||
Clock,
|
||||
Users,
|
||||
Zap,
|
||||
Calendar,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function GameForgeStartBuilding() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const currentProjects = [
|
||||
{
|
||||
title: "Pixel Quest: Reckoning",
|
||||
phase: "Shipping",
|
||||
progress: 95,
|
||||
team: "Green Squadron (8 devs)",
|
||||
daysLeft: 3,
|
||||
features: "New combat, 50 levels, multiplayer beta",
|
||||
},
|
||||
{
|
||||
title: "Logic Master Pro",
|
||||
phase: "Alpha Testing",
|
||||
progress: 65,
|
||||
team: "Logic Lab (5 devs)",
|
||||
daysLeft: 14,
|
||||
features: "Daily challenges, leaderboards, cross-platform",
|
||||
},
|
||||
{
|
||||
title: "Mystic Realms: Awakening",
|
||||
phase: "Development",
|
||||
progress: 40,
|
||||
team: "Adventure Wing (10 devs)",
|
||||
daysLeft: 22,
|
||||
features: "Story driven, 100+ hours, procedural dungeons",
|
||||
},
|
||||
];
|
||||
|
||||
const monthlyReleaseSchedule = [
|
||||
{
|
||||
month: "January",
|
||||
releaseDate: "Jan 31, 2025",
|
||||
game: "Pixel Quest: Reckoning",
|
||||
status: "On Track",
|
||||
},
|
||||
{
|
||||
month: "February",
|
||||
releaseDate: "Feb 28, 2025",
|
||||
game: "Logic Master Pro",
|
||||
status: "On Track",
|
||||
},
|
||||
{
|
||||
month: "March",
|
||||
releaseDate: "Mar 31, 2025",
|
||||
game: "Mystic Realms: Awakening",
|
||||
status: "Planned",
|
||||
},
|
||||
];
|
||||
|
||||
const productionPhases = [
|
||||
{
|
||||
phase: "Ideation",
|
||||
duration: "1 week",
|
||||
description: "Brainstorm and validate core concept",
|
||||
team: "Design + Leads",
|
||||
},
|
||||
{
|
||||
phase: "Prototyping",
|
||||
duration: "1 week",
|
||||
description: "Build playable proof of concept",
|
||||
team: "Tech Lead + 2 Devs",
|
||||
},
|
||||
{
|
||||
phase: "Development",
|
||||
duration: "3 weeks",
|
||||
description: "Full production with parallel teams",
|
||||
team: "Full Team",
|
||||
},
|
||||
{
|
||||
phase: "Polish & QA",
|
||||
duration: "1 week",
|
||||
description: "Bug fixes, optimization, player testing",
|
||||
team: "QA Team + Leads",
|
||||
},
|
||||
{
|
||||
phase: "Launch",
|
||||
duration: "1 day",
|
||||
description: "Ship to production, monitor metrics",
|
||||
team: "DevOps + Product",
|
||||
},
|
||||
];
|
||||
|
||||
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,#22c55e_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(34,197,94,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(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,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-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-green-300 mb-4">
|
||||
Production Pipeline
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-3xl">
|
||||
How we ship a game every month. Our proven process, team
|
||||
coordination, and development tools that make monthly shipping
|
||||
possible.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Current Projects */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8">
|
||||
Current Projects in Development
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{currentProjects.map((project, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-green-300 mb-2">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{project.team}
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
|
||||
{project.phase}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span className="text-xs font-semibold text-green-400">
|
||||
Progress
|
||||
</span>
|
||||
<span className="text-xs text-green-200/70">
|
||||
{project.progress}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-green-950/40 rounded-full h-3">
|
||||
<div
|
||||
className="bg-green-400 h-3 rounded-full transition-all"
|
||||
style={{ width: `${project.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Meta */}
|
||||
<div className="grid md:grid-cols-3 gap-4 pt-4 border-t border-green-400/10">
|
||||
<div>
|
||||
<p className="text-xs text-green-400 font-semibold mb-1">
|
||||
Days to Ship
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300">
|
||||
{project.daysLeft}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-green-400 font-semibold mb-1">
|
||||
Key Features
|
||||
</p>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{project.features}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
View Details →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Release Schedule */}
|
||||
<section className="py-16 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8">
|
||||
Monthly Release Schedule
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{monthlyReleaseSchedule.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Calendar className="h-5 w-5 text-green-400" />
|
||||
<div>
|
||||
<p className="font-semibold text-green-300">
|
||||
{item.month} - {item.game}
|
||||
</p>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Shipping {item.releaseDate}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge
|
||||
className={`${
|
||||
item.status === "On Track"
|
||||
? "bg-green-500/20 text-green-300 border border-green-400/40"
|
||||
: "bg-purple-500/20 text-purple-300 border border-purple-400/40"
|
||||
}`}
|
||||
>
|
||||
{item.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Production Phases */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8">
|
||||
Our 5-Week Process
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{productionPhases.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="h-12 w-12 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center text-white font-bold flex-shrink-0">
|
||||
{idx + 1}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-green-300 mb-2">
|
||||
{item.phase}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70 mb-2">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
|
||||
<Clock className="h-3 w-3 mr-1" />
|
||||
{item.duration}
|
||||
</Badge>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
|
||||
<Users className="h-3 w-3 mr-1" />
|
||||
{item.team}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<section className="py-16 border-t border-green-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8">
|
||||
Production Metrics
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ label: "Monthly Cycle", value: "32 days" },
|
||||
{ label: "Avg Team Size", value: "8 devs" },
|
||||
{ label: "Lines of Code", value: "50K+" },
|
||||
{ label: "Success Rate", value: "100%" },
|
||||
].map((metric, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/30 border-green-400/40 text-center"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-3xl font-black text-green-400 mb-2">
|
||||
{metric.value}
|
||||
</p>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{metric.label}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,251 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Users, Linkedin, Github, Mail } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface TeamMemberDetails {
|
||||
id: number;
|
||||
name: string;
|
||||
role: string;
|
||||
bio: string;
|
||||
expertise: string[];
|
||||
social: {
|
||||
linkedin?: string;
|
||||
github?: string;
|
||||
email: string;
|
||||
};
|
||||
joinedYear: number;
|
||||
}
|
||||
|
||||
const TEAM: TeamMemberDetails[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Alex Morgan",
|
||||
role: "Founder & CEO",
|
||||
bio: "Visionary leader with 20+ years in game technology. Built teams at major studios and led technical innovation.",
|
||||
expertise: ["Strategic Vision", "Game Architecture", "Team Building"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
github: "https://github.com",
|
||||
email: "alex@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2020,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Jordan Lee",
|
||||
role: "VP Engineering",
|
||||
bio: "Engineering leader focused on developer experience. Passionate about making tools that developers love.",
|
||||
expertise: ["Platform Architecture", "DevOps", "Developer Tools"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
github: "https://github.com",
|
||||
email: "jordan@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2021,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Casey Williams",
|
||||
role: "Head of Community",
|
||||
bio: "Community builder who believes in empowering creators. Led developer programs at top tech companies.",
|
||||
expertise: ["Community Strategy", "Events", "Developer Relations"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
email: "casey@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2021,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Taylor Chen",
|
||||
role: "Product Manager",
|
||||
bio: "Product strategist with a track record of shipping features developers actually want.",
|
||||
expertise: ["Product Strategy", "User Research", "Roadmapping"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
github: "https://github.com",
|
||||
email: "taylor@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2022,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Morgan Swift",
|
||||
role: "Head of Design",
|
||||
bio: "Design-focused leader creating beautiful, intuitive experiences for game developers.",
|
||||
expertise: ["UI/UX Design", "Design Systems", "User Experience"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
email: "morgan@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2022,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Riley Davis",
|
||||
role: "Developer Relations",
|
||||
bio: "Passionate educator helping developers succeed. Active speaker at conferences and events.",
|
||||
expertise: ["Developer Education", "Technical Writing", "Speaking"],
|
||||
social: {
|
||||
github: "https://github.com",
|
||||
email: "riley@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2023,
|
||||
},
|
||||
];
|
||||
|
||||
export default function GameForgeTeams() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_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(34,197,94,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(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,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-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16 lg:py-20">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Our Team
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
The People Behind GameForge
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Meet the passionate team dedicated to helping you build amazing
|
||||
games.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{TEAM.map((member) => (
|
||||
<Card
|
||||
key={member.id}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all hover:shadow-lg hover:shadow-green-500/20 overflow-hidden group"
|
||||
>
|
||||
{/* Avatar Area */}
|
||||
<div className="h-32 bg-gradient-to-b from-green-500/20 to-transparent flex items-center justify-center group-hover:from-green-500/30 transition-colors">
|
||||
<div className="w-20 h-20 rounded-full bg-green-400/20 border-2 border-green-400/40 flex items-center justify-center text-xl font-bold text-green-300">
|
||||
{member.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
{/* Name & Role */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-green-400 font-medium">
|
||||
{member.role}
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60 mt-1">
|
||||
Joined {member.joinedYear}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bio */}
|
||||
<p className="text-sm text-green-200/70">{member.bio}</p>
|
||||
|
||||
{/* Expertise Tags */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
Expertise
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.expertise.map((skill, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
variant="outline"
|
||||
className="bg-green-500/10 border-green-400/30 text-green-300 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex items-center gap-2 pt-4 border-t border-green-400/10">
|
||||
{member.social.linkedin && (
|
||||
<a
|
||||
href={member.social.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors"
|
||||
title="LinkedIn"
|
||||
>
|
||||
<Linkedin className="h-4 w-4" />
|
||||
</a>
|
||||
)}
|
||||
{member.social.github && (
|
||||
<a
|
||||
href={member.social.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors"
|
||||
title="GitHub"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href={`mailto:${member.social.email}`}
|
||||
className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors ml-auto"
|
||||
title="Email"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Join Our Team CTA */}
|
||||
<section className="py-16 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Want to Join Us?
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
We're building the future of game development. If you're
|
||||
passionate about empowering creators, we'd love to hear from
|
||||
you.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
|
||||
View Open Positions
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Star, Download, Calendar, Users, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function GameForgeViewPortfolio() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const games = [
|
||||
{
|
||||
title: "Battle Royale X",
|
||||
releaseDate: "December 2024",
|
||||
genre: "Action",
|
||||
players: "50K+",
|
||||
rating: 4.7,
|
||||
downloads: "145K",
|
||||
revenue: "$85K",
|
||||
team: "10 devs, 2 designers",
|
||||
},
|
||||
{
|
||||
title: "Casual Match",
|
||||
releaseDate: "November 2024",
|
||||
genre: "Puzzle",
|
||||
players: "100K+",
|
||||
rating: 4.5,
|
||||
downloads: "320K",
|
||||
revenue: "$125K",
|
||||
team: "6 devs, 1 designer",
|
||||
},
|
||||
{
|
||||
title: "Speedrun Challenge",
|
||||
releaseDate: "October 2024",
|
||||
genre: "Action",
|
||||
players: "35K+",
|
||||
rating: 4.8,
|
||||
downloads: "98K",
|
||||
revenue: "$52K",
|
||||
team: "8 devs, 1 designer",
|
||||
},
|
||||
{
|
||||
title: "Story Adventure",
|
||||
releaseDate: "September 2024",
|
||||
genre: "Adventure",
|
||||
players: "28K+",
|
||||
rating: 4.6,
|
||||
downloads: "76K",
|
||||
revenue: "$38K",
|
||||
team: "12 devs, 3 designers",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_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(34,197,94,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(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,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-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-green-300 mb-4">
|
||||
Released Games
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-3xl">
|
||||
Games shipped by GameForge. See player stats, revenue, and team
|
||||
sizes from our monthly releases.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="space-y-6">
|
||||
{games.map((game, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300 mb-1">
|
||||
{game.title}
|
||||
</h3>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
|
||||
{game.genre}
|
||||
</Badge>
|
||||
<p className="text-xs text-green-200/60 mt-2">
|
||||
{game.releaseDate}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
PLAYERS
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300">
|
||||
{game.players}
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60">active</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
RATING
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300 flex items-center gap-1">
|
||||
{game.rating}{" "}
|
||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60">
|
||||
{game.downloads} downloads
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
REVENUE
|
||||
</p>
|
||||
<p className="text-lg font-bold text-green-300">
|
||||
{game.revenue}
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60">
|
||||
{game.team}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-end justify-end">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
Details →
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-16 border-t border-green-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Games in Development
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
View the current production pipeline and upcoming releases.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
onClick={() => navigate("/gameforge/start-building")}
|
||||
>
|
||||
View Pipeline
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
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 { Zap, Target, Users, BookOpen } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LabsAbout() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative overflow-hidden py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/labs")}
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
|
||||
About AeThex Labs
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-2xl">
|
||||
Pushing the boundaries of what's possible in game development
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<div className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8 mb-12">
|
||||
<h2 className="text-2xl font-bold text-yellow-300 mb-4">Our Mission</h2>
|
||||
<p className="text-yellow-200/80 text-lg leading-relaxed">
|
||||
AeThex Labs is dedicated to advancing the state of game development through cutting-edge research,
|
||||
comprehensive documentation, and community education. We believe in the power of collaborative innovation
|
||||
and are committed to making game development more accessible and efficient for creators everywhere.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Values */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30">
|
||||
<CardHeader>
|
||||
<Zap className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">Innovation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-yellow-200/70">
|
||||
Constantly exploring new techniques and frameworks to push creative boundaries
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30">
|
||||
<CardHeader>
|
||||
<Target className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">Excellence</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-yellow-200/70">
|
||||
Maintaining the highest standards in our research and educational initiatives
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">Collaboration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-yellow-200/70">
|
||||
Working together with developers, studios, and tools like Dev-Link to grow the ecosystem
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30">
|
||||
<CardHeader>
|
||||
<BookOpen className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">Education</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-yellow-200/70">
|
||||
Creating resources and knowledge that empower the next generation of developers
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dev-Link Connection */}
|
||||
<div className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8">
|
||||
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 mb-4">
|
||||
Ecosystem
|
||||
</Badge>
|
||||
<h3 className="text-2xl font-bold text-yellow-300 mb-4">
|
||||
Partnering with Dev-Link
|
||||
</h3>
|
||||
<p className="text-yellow-200/80 mb-4">
|
||||
AeThex Labs works closely with Dev-Link, our professional network platform for Roblox developers,
|
||||
to ensure our research and innovations directly benefit the developer community. Through Dev-Link,
|
||||
we connect researchers with talented developers who can implement and refine our findings.
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => navigate("/dev-link/waitlist")}
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
>
|
||||
Join Dev-Link
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
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 { ArrowRight, TrendingUp } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const CASE_STUDIES = [
|
||||
{
|
||||
title: "Scaling Game Performance",
|
||||
studio: "MegaStudios Inc.",
|
||||
challenge:
|
||||
"Handling 10,000+ concurrent players while maintaining 60fps performance",
|
||||
solution:
|
||||
"Implemented Labs optimization framework and distributed architecture patterns",
|
||||
results: ["99.8% uptime", "2x performance improvement", "30% cost reduction"],
|
||||
image: "🚀",
|
||||
},
|
||||
{
|
||||
title: "Dev-Link Integration",
|
||||
studio: "TalentFlow Collective",
|
||||
challenge:
|
||||
"Recruiting and retaining top Roblox developers across multiple timezones",
|
||||
solution:
|
||||
"Adopted Dev-Link platform for community building and skill matching, combined with Labs training resources",
|
||||
results: [
|
||||
"150% increase in quality hires",
|
||||
"40% faster onboarding",
|
||||
"Enhanced developer satisfaction",
|
||||
],
|
||||
image: "🌐",
|
||||
highlighted: true,
|
||||
},
|
||||
{
|
||||
title: "Framework Modernization",
|
||||
studio: "InnovateGames Ltd.",
|
||||
challenge: "Upgrading legacy codebase while maintaining live product",
|
||||
solution:
|
||||
"Used Labs best practices and graduated migration strategy to modernize framework",
|
||||
results: [
|
||||
"Zero production downtime",
|
||||
"50% code reduction",
|
||||
"Modern architecture established",
|
||||
],
|
||||
image: "⚙️",
|
||||
},
|
||||
{
|
||||
title: "Team Growth & Development",
|
||||
studio: "GrowthLabs Studio",
|
||||
challenge:
|
||||
"Building a world-class engineering team from junior developers",
|
||||
solution:
|
||||
"Leveraged Labs educational resources and Dev-Link community for talent discovery and mentorship",
|
||||
results: [
|
||||
"10 developers trained and promoted",
|
||||
"Internal innovation projects launched",
|
||||
"Industry recognition achieved",
|
||||
],
|
||||
image: "👥",
|
||||
},
|
||||
];
|
||||
|
||||
export default function LabsCaseStudies() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative overflow-hidden py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/labs")}
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
|
||||
Case Studies
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-2xl">
|
||||
See how leading studios use AeThex Labs and Dev-Link to achieve their goals
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="space-y-8">
|
||||
{CASE_STUDIES.map((study) => (
|
||||
<Card
|
||||
key={study.title}
|
||||
className={`border transition-all ${
|
||||
study.highlighted
|
||||
? "bg-yellow-950/40 border-yellow-400 ring-2 ring-yellow-400/50"
|
||||
: "bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60"
|
||||
}`}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-yellow-300 mb-2">
|
||||
{study.title}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-yellow-200/70">{study.studio}</p>
|
||||
</div>
|
||||
<div className="text-4xl">{study.image}</div>
|
||||
</div>
|
||||
{study.highlighted && (
|
||||
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 w-fit">
|
||||
<TrendingUp className="h-3 w-3 mr-2" />
|
||||
Featured
|
||||
</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-semibold text-yellow-300 mb-2">
|
||||
Challenge
|
||||
</h4>
|
||||
<p className="text-yellow-200/70">{study.challenge}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-yellow-300 mb-2">
|
||||
Solution
|
||||
</h4>
|
||||
<p className="text-yellow-200/70">{study.solution}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-yellow-300 mb-2">
|
||||
Results
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{study.results.map((result) => (
|
||||
<Badge
|
||||
key={result}
|
||||
className="bg-yellow-500/20 text-yellow-300 border-0"
|
||||
>
|
||||
✓ {result}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="mt-12 rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8 text-center">
|
||||
<h2 className="text-2xl font-bold text-yellow-300 mb-4">
|
||||
Ready to Write Your Success Story?
|
||||
</h2>
|
||||
<p className="text-yellow-200/80 mb-6 max-w-2xl mx-auto">
|
||||
Combine AeThex Labs research with Dev-Link's professional community to accelerate your growth
|
||||
</p>
|
||||
<div className="flex gap-4 justify-center flex-wrap">
|
||||
<Button className="bg-yellow-400 text-black hover:bg-yellow-300">
|
||||
Get Started with Labs
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
|
||||
onClick={() => navigate("/dev-link/waitlist")}
|
||||
>
|
||||
Join Dev-Link <ArrowRight className="h-4 w-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
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 {
|
||||
ArrowRight,
|
||||
Users,
|
||||
Clock,
|
||||
Zap,
|
||||
Download,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LabsExploreResearch() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const researchProjects = [
|
||||
{
|
||||
title: "AI-Powered NPC Behavior Systems",
|
||||
status: "Active Research",
|
||||
team: 5,
|
||||
duration: "6 months",
|
||||
description:
|
||||
"Machine learning models for realistic, adaptive NPC behavior in games. Uses reinforcement learning to create NPCs that learn from player interactions.",
|
||||
keyAchievements: [
|
||||
"50% faster training time vs baseline",
|
||||
"Natural conversation patterns",
|
||||
"Dynamic difficulty scaling",
|
||||
],
|
||||
technologies: ["TensorFlow", "Python", "Lua"],
|
||||
impact: "Shipping in Q2 2025 GameForge games",
|
||||
paper: null,
|
||||
code: "github.com/aethex/ai-npc",
|
||||
},
|
||||
{
|
||||
title: "Next-Gen Web Architecture",
|
||||
status: "Exploration Phase",
|
||||
team: 3,
|
||||
duration: "3 months",
|
||||
description:
|
||||
"Exploring edge computing and serverless patterns for ultra-low latency experiences. Focus on reducing load times to <100ms.",
|
||||
keyAchievements: [
|
||||
"Proof of concept complete",
|
||||
"80% latency reduction achieved",
|
||||
"Framework design finalized",
|
||||
],
|
||||
technologies: ["Cloudflare Workers", "WebAssembly", "TypeScript"],
|
||||
impact: "Foundation for next-gen platform",
|
||||
paper: "Next-Gen Architecture White Paper (Dec 2024)",
|
||||
code: null,
|
||||
},
|
||||
{
|
||||
title: "Procedural Content Generation",
|
||||
status: "Published",
|
||||
team: 4,
|
||||
duration: "8 months",
|
||||
description:
|
||||
"Algorithms for infinite, dynamic game world generation. Published research accepted at Game Dev Summit 2024.",
|
||||
keyAchievements: [
|
||||
"Paper published in proceedings",
|
||||
"Open-source library released",
|
||||
"3K+ GitHub stars",
|
||||
],
|
||||
technologies: ["Rust", "Perlin Noise", "Graph Theory"],
|
||||
impact: "Used in 5+ community games",
|
||||
paper: "Procedural Generation at Scale",
|
||||
code: "github.com/aethex/proc-gen",
|
||||
},
|
||||
{
|
||||
title: "Real-Time Ray Tracing Optimization",
|
||||
status: "Development",
|
||||
team: 6,
|
||||
duration: "5 months",
|
||||
description:
|
||||
"Breakthrough techniques for ray tracing on consumer hardware without sacrificing performance. Hybrid rasterization + ray tracing approach.",
|
||||
keyAchievements: [
|
||||
"4x performance improvement",
|
||||
"Production-ready implementation",
|
||||
"Works on mobile hardware",
|
||||
],
|
||||
technologies: ["GLSL", "C++", "GPU Compute"],
|
||||
impact: "Launching as free SDK in 2025",
|
||||
paper: null,
|
||||
code: "github.com/aethex/raytracing-sdk",
|
||||
},
|
||||
];
|
||||
|
||||
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,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-yellow-300 mb-4">
|
||||
Research Projects
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-3xl">
|
||||
Explore the cutting-edge research being conducted in AeThex
|
||||
Labs. Each project represents our commitment to pushing the
|
||||
boundaries of technology.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="space-y-8">
|
||||
{researchProjects.map((project, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-all"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<CardTitle className="text-2xl text-yellow-300 mb-2">
|
||||
{project.title}
|
||||
</CardTitle>
|
||||
<Badge
|
||||
className={`${
|
||||
project.status === "Published"
|
||||
? "bg-green-500/20 border border-green-400/40 text-green-300"
|
||||
: project.status === "Active Research"
|
||||
? "bg-yellow-500/20 border border-yellow-400/40 text-yellow-300"
|
||||
: "bg-purple-500/20 border border-purple-400/40 text-purple-300"
|
||||
}`}
|
||||
>
|
||||
{project.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-yellow-400 font-semibold">
|
||||
{project.team} researchers
|
||||
</p>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
{project.duration}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Description */}
|
||||
<p className="text-yellow-200/80">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
{/* Key Achievements */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-yellow-400 mb-3">
|
||||
Key Achievements
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{project.keyAchievements.map((achievement, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-center gap-2 text-sm text-yellow-200/80"
|
||||
>
|
||||
<Zap className="h-4 w-4 text-yellow-400" />
|
||||
{achievement}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Technologies */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-yellow-400 mb-3">
|
||||
Technologies
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.technologies.map((tech, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
className="bg-yellow-500/20 text-yellow-300 border border-yellow-400/40"
|
||||
>
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Impact & Links */}
|
||||
<div className="pt-4 border-t border-yellow-400/10 flex flex-wrap items-center justify-between gap-4">
|
||||
<p className="text-sm text-yellow-200/80">
|
||||
<span className="font-semibold text-yellow-400">
|
||||
Impact:
|
||||
</span>{" "}
|
||||
{project.impact}
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
{project.paper && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
Paper
|
||||
</Button>
|
||||
)}
|
||||
{project.code && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-1" />
|
||||
Code
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-16 border-t border-yellow-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-4">
|
||||
Interested in Research?
|
||||
</h2>
|
||||
<p className="text-lg text-yellow-100/80 mb-8">
|
||||
Join our research team and contribute to the future of
|
||||
technology.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
onClick={() => navigate("/careers")}
|
||||
>
|
||||
View Research Positions
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,277 +0,0 @@
|
|||
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 {
|
||||
CheckCircle,
|
||||
Users,
|
||||
BookOpen,
|
||||
Code,
|
||||
Zap,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LabsGetInvolved() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const opportunities = [
|
||||
{
|
||||
title: "Research Partnerships",
|
||||
description: "Collaborate with our team on research projects",
|
||||
details: [
|
||||
"Co-author research papers",
|
||||
"Access to our lab facilities",
|
||||
"Joint publications",
|
||||
"Revenue sharing on commercialized research",
|
||||
],
|
||||
icon: <BookOpen className="h-6 w-6" />,
|
||||
color: "from-purple-500 to-pink-500",
|
||||
},
|
||||
{
|
||||
title: "Open Source Contributions",
|
||||
description: "Help us build and improve our open-source projects",
|
||||
details: [
|
||||
"Fork and contribute to projects",
|
||||
"Get recognized as contributor",
|
||||
"Influence project direction",
|
||||
"Build your open-source portfolio",
|
||||
],
|
||||
icon: <Code className="h-6 w-6" />,
|
||||
color: "from-green-500 to-emerald-500",
|
||||
},
|
||||
{
|
||||
title: "Speaking & Workshops",
|
||||
description: "Share your expertise with our community",
|
||||
details: [
|
||||
"Host technical workshops",
|
||||
"Speak at our conferences",
|
||||
"Lead educational content",
|
||||
"Build your professional brand",
|
||||
],
|
||||
icon: <Users className="h-6 w-6" />,
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
{
|
||||
title: "Technical Advisory",
|
||||
description: "Advise us on emerging technologies",
|
||||
details: [
|
||||
"Join our advisory board",
|
||||
"Shape research direction",
|
||||
"Quarterly meetings",
|
||||
"Competitive advisory fees",
|
||||
],
|
||||
icon: <Zap className="h-6 w-6" />,
|
||||
color: "from-orange-500 to-red-500",
|
||||
},
|
||||
];
|
||||
|
||||
const process = [
|
||||
{
|
||||
step: 1,
|
||||
title: "Express Interest",
|
||||
description: "Tell us which opportunity excites you",
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: "Initial Conversation",
|
||||
description: "Meet with our team to discuss details",
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: "Formalize Agreement",
|
||||
description: "Sign partnership terms and get started",
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: "Collaborate",
|
||||
description: "Work together to advance technology",
|
||||
},
|
||||
];
|
||||
|
||||
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,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<div className="space-y-4 mb-12">
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-yellow-300">
|
||||
Get Involved
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-3xl">
|
||||
There are many ways to collaborate with AeThex Labs. Whether
|
||||
you're a researcher, developer, or thought leader, we'd love
|
||||
to work together.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Opportunities Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{opportunities.map((opp, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-all"
|
||||
>
|
||||
<CardHeader>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-lg bg-gradient-to-r ${opp.color} flex items-center justify-center text-white mb-4`}
|
||||
>
|
||||
{opp.icon}
|
||||
</div>
|
||||
<CardTitle className="text-yellow-300">
|
||||
{opp.title}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-yellow-200/70 mt-2">
|
||||
{opp.description}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
{opp.details.map((detail, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-start gap-2 text-sm text-yellow-200/80"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
{detail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className="py-16 border-t border-yellow-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-12">
|
||||
How to Get Started
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{process.map((item) => (
|
||||
<Card
|
||||
key={item.step}
|
||||
className="bg-yellow-950/20 border-yellow-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-4xl font-black text-yellow-400 mb-3">
|
||||
{item.step}
|
||||
</div>
|
||||
<h3 className="font-bold text-yellow-300 mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
{item.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-8">
|
||||
Why Partner With Labs
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Cutting-Edge Technology",
|
||||
description:
|
||||
"Access to our latest research and innovations before they're public",
|
||||
},
|
||||
{
|
||||
title: "Global Reach",
|
||||
description:
|
||||
"Connect with 50K+ developers in our ecosystem and beyond",
|
||||
},
|
||||
{
|
||||
title: "Professional Growth",
|
||||
description:
|
||||
"Build your reputation through published research and speaking engagements",
|
||||
},
|
||||
{
|
||||
title: "Revenue Sharing",
|
||||
description:
|
||||
"Get compensated for contributions that drive business value",
|
||||
},
|
||||
{
|
||||
title: "Mentorship",
|
||||
description:
|
||||
"Learn from world-class researchers and engineers on our team",
|
||||
},
|
||||
{
|
||||
title: "Community Impact",
|
||||
description:
|
||||
"Help shape the future of gaming and digital technology",
|
||||
},
|
||||
].map((benefit, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<CheckCircle className="h-6 w-6 text-yellow-400 mb-3" />
|
||||
<h3 className="font-bold text-yellow-300 mb-2">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
{benefit.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-16 border-t border-yellow-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-4">
|
||||
Ready to Collaborate?
|
||||
</h2>
|
||||
<p className="text-lg text-yellow-100/80 mb-8">
|
||||
Reach out to learn more about our partnership opportunities.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
onClick={() => navigate("/contact")}
|
||||
>
|
||||
Contact Us
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,256 +0,0 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Users, Linkedin, Github, Mail, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LabsJoinTeam() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const team = [
|
||||
{
|
||||
name: "Dr. Sarah Chen",
|
||||
role: "Research Director",
|
||||
bio: "PhD in Computer Science (MIT). 15+ years in game technology. Led AI research at major studios.",
|
||||
expertise: ["AI/ML", "Game Architecture", "Team Leadership"],
|
||||
social: {
|
||||
linkedin: "#",
|
||||
github: "#",
|
||||
email: "sarah@aethex.com",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Marcus Johnson",
|
||||
role: "Senior Graphics Engineer",
|
||||
bio: "GPU optimization specialist. Published research on ray tracing. Built rendering engines at AAA studios.",
|
||||
expertise: ["Graphics", "GPU Computing", "Performance"],
|
||||
social: {
|
||||
linkedin: "#",
|
||||
github: "#",
|
||||
email: "marcus@aethex.com",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Elena Rodriguez",
|
||||
role: "Distributed Systems Engineer",
|
||||
bio: "Expert in scalable backend architecture. Built systems handling 1M+ concurrent connections.",
|
||||
expertise: ["Distributed Systems", "Cloud Architecture", "DevOps"],
|
||||
social: {
|
||||
linkedin: "#",
|
||||
github: "#",
|
||||
email: "elena@aethex.com",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "David Kim",
|
||||
role: "ML Engineer",
|
||||
bio: "TensorFlow contributor. Specializes in game AI and procedural generation algorithms.",
|
||||
expertise: ["Machine Learning", "Game AI", "Neural Networks"],
|
||||
social: {
|
||||
linkedin: "#",
|
||||
github: "#",
|
||||
email: "david@aethex.com",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Sophia Patel",
|
||||
role: "Research Scientist",
|
||||
bio: "Published 10+ papers on game optimization. PhD from Stanford. Published in top conferences.",
|
||||
expertise: ["Algorithm Design", "Optimization", "Research"],
|
||||
social: {
|
||||
linkedin: "#",
|
||||
github: "#",
|
||||
email: "sophia@aethex.com",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Alex Morgan",
|
||||
role: "Director of Innovation",
|
||||
bio: "20+ years driving innovation. Mentor to the team. Visionary for future of gaming tech.",
|
||||
expertise: ["Vision", "Mentorship", "Strategy"],
|
||||
social: {
|
||||
linkedin: "#",
|
||||
github: "#",
|
||||
email: "alex@aethex.com",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
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,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<div className="space-y-4 mb-12">
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-yellow-300">
|
||||
Meet the Lab
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-3xl">
|
||||
World-class researchers and engineers dedicated to advancing
|
||||
technology. Our team includes PhD researchers, published
|
||||
authors, and visionary thinkers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{team.map((member, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-all"
|
||||
>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
{/* Avatar Placeholder */}
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold text-xl">
|
||||
{member.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</div>
|
||||
|
||||
{/* Name & Role */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-yellow-300">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-400 font-medium">
|
||||
{member.role}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bio */}
|
||||
<p className="text-sm text-yellow-200/70">{member.bio}</p>
|
||||
|
||||
{/* Expertise */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold text-yellow-400">
|
||||
Expertise
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.expertise.map((skill, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
className="bg-yellow-500/20 text-yellow-300 border border-yellow-400/40 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-2 pt-4 border-t border-yellow-400/10">
|
||||
<a
|
||||
href={member.social.linkedin}
|
||||
className="p-2 rounded hover:bg-yellow-500/10 text-yellow-300 hover:text-yellow-200 transition-colors"
|
||||
>
|
||||
<Linkedin className="h-4 w-4" />
|
||||
</a>
|
||||
<a
|
||||
href={member.social.github}
|
||||
className="p-2 rounded hover:bg-yellow-500/10 text-yellow-300 hover:text-yellow-200 transition-colors"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
</a>
|
||||
<a
|
||||
href={`mailto:${member.social.email}`}
|
||||
className="p-2 rounded hover:bg-yellow-500/10 text-yellow-300 hover:text-yellow-200 transition-colors ml-auto"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Culture */}
|
||||
<section className="py-16 border-t border-yellow-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-8">
|
||||
Lab Culture
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Push Boundaries",
|
||||
description:
|
||||
"We tackle problems nobody else is solving. Innovation over comfort.",
|
||||
},
|
||||
{
|
||||
title: "Publish Results",
|
||||
description:
|
||||
"Share your research with the world. Present at conferences. Build your reputation.",
|
||||
},
|
||||
{
|
||||
title: "Mentor Others",
|
||||
description:
|
||||
"Junior researchers learn from seniors. We grow as a team and help the community.",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="font-bold text-yellow-300 mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
{item.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-16 border-t border-yellow-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-4">
|
||||
Join the Lab
|
||||
</h2>
|
||||
<p className="text-lg text-yellow-100/80 mb-8">
|
||||
We're looking for brilliant minds to join our team. Researchers,
|
||||
engineers, and visionaries welcome.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
onClick={() => navigate("/careers")}
|
||||
>
|
||||
See Open Positions
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
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 { Check } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const PRICING_TIERS = [
|
||||
{
|
||||
name: "Starter",
|
||||
description: "Perfect for indie developers",
|
||||
price: "Free",
|
||||
features: [
|
||||
"Access to documentation",
|
||||
"Community forums",
|
||||
"Monthly research updates",
|
||||
"Basic tools and templates",
|
||||
],
|
||||
cta: "Get Started",
|
||||
highlighted: false,
|
||||
},
|
||||
{
|
||||
name: "Professional",
|
||||
description: "For growing studios",
|
||||
price: "$49",
|
||||
period: "/month",
|
||||
features: [
|
||||
"Everything in Starter",
|
||||
"Advanced optimization guides",
|
||||
"Priority support",
|
||||
"Exclusive research previews",
|
||||
"API access",
|
||||
"Custom consulting hours",
|
||||
],
|
||||
cta: "Start Free Trial",
|
||||
highlighted: true,
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
description: "For large-scale operations",
|
||||
price: "Custom",
|
||||
features: [
|
||||
"Everything in Professional",
|
||||
"Dedicated support team",
|
||||
"Custom research projects",
|
||||
"On-site training",
|
||||
"API SLA guarantee",
|
||||
"Custom integrations",
|
||||
],
|
||||
cta: "Contact Sales",
|
||||
highlighted: false,
|
||||
},
|
||||
];
|
||||
|
||||
export default function LabsPricing() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative overflow-hidden py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/labs")}
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
|
||||
Labs Pricing
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-2xl">
|
||||
Invest in your development journey with flexible pricing plans
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{PRICING_TIERS.map((tier) => (
|
||||
<Card
|
||||
key={tier.name}
|
||||
className={`border transition-all ${
|
||||
tier.highlighted
|
||||
? "bg-yellow-950/40 border-yellow-400 ring-2 ring-yellow-400/50"
|
||||
: "bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60"
|
||||
}`}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-yellow-300">{tier.name}</CardTitle>
|
||||
<p className="text-sm text-yellow-200/70 mt-2">{tier.description}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-yellow-300">
|
||||
{tier.price}
|
||||
</div>
|
||||
{tier.period && (
|
||||
<p className="text-sm text-yellow-200/70">{tier.period}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{tier.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3">
|
||||
<Check className="h-5 w-5 text-yellow-400 flex-shrink-0 mt-0.5" />
|
||||
<span className="text-yellow-200/80">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Button
|
||||
className={
|
||||
tier.highlighted
|
||||
? "w-full bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
: "w-full border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
|
||||
}
|
||||
variant={tier.highlighted ? "default" : "outline"}
|
||||
>
|
||||
{tier.cta}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<h2 className="text-2xl font-bold text-yellow-300 mb-8">Frequently Asked Questions</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
q: "Can I change plans anytime?",
|
||||
a: "Yes, upgrade or downgrade your plan at any time.",
|
||||
},
|
||||
{
|
||||
q: "Do you offer discounts for annual billing?",
|
||||
a: "Yes, save 20% with annual plans on Professional and Enterprise tiers.",
|
||||
},
|
||||
{
|
||||
q: "Is there a free trial?",
|
||||
a: "Professional tier includes a 14-day free trial. No credit card required.",
|
||||
},
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.q}
|
||||
className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-4"
|
||||
>
|
||||
<h3 className="font-semibold text-yellow-300 mb-2">{item.q}</h3>
|
||||
<p className="text-yellow-200/70">{item.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
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 { Users, Github, Mail, Linkedin } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const TEAM_MEMBERS = [
|
||||
{
|
||||
name: "Dr. Sarah Chen",
|
||||
role: "Head of Research",
|
||||
bio: "Leading innovation in game development frameworks",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
|
||||
skills: ["Research", "Architecture", "Leadership"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
{
|
||||
name: "Marcus Johnson",
|
||||
role: "Senior Engineer",
|
||||
bio: "Expert in Roblox optimization and scaling",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus",
|
||||
skills: ["Engineering", "Performance", "DevOps"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
{
|
||||
name: "Emma Rodriguez",
|
||||
role: "Product Manager",
|
||||
bio: "Driving Labs initiatives and collaboration",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma",
|
||||
skills: ["Product", "Strategy", "Design"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
{
|
||||
name: "James Lee",
|
||||
role: "Documentation Lead",
|
||||
bio: "Creating comprehensive learning resources",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=James",
|
||||
skills: ["Documentation", "Education", "Content"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
},
|
||||
];
|
||||
|
||||
export default function LabsTeams() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#fbbf24_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(251,191,36,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(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,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-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Header */}
|
||||
<section className="relative overflow-hidden py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/labs")}
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<div className="mb-12">
|
||||
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 mb-4">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Our Team
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
|
||||
Meet the AeThex Labs Team
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-2xl">
|
||||
Passionate researchers and engineers dedicated to advancing game development
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Grid */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
{TEAM_MEMBERS.map((member) => (
|
||||
<Card
|
||||
key={member.name}
|
||||
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 hover:bg-yellow-950/30 transition-all"
|
||||
>
|
||||
<CardHeader className="text-center">
|
||||
<img
|
||||
src={member.avatar}
|
||||
alt={member.name}
|
||||
className="w-20 h-20 rounded-full mx-auto mb-4 border-2 border-yellow-400/50"
|
||||
/>
|
||||
<CardTitle className="text-yellow-300">{member.name}</CardTitle>
|
||||
<p className="text-sm text-yellow-200/70 mt-1">{member.role}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-yellow-200/70">{member.bio}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.skills.map((skill) => (
|
||||
<Badge
|
||||
key={skill}
|
||||
className="bg-yellow-500/20 text-yellow-300 border-0 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<a href={member.social.github} className="text-yellow-400 hover:text-yellow-300">
|
||||
<Github className="h-5 w-5" />
|
||||
</a>
|
||||
<a href={member.social.linkedin} className="text-yellow-400 hover:text-yellow-300">
|
||||
<Linkedin className="h-5 w-5" />
|
||||
</a>
|
||||
<a href={member.social.email} className="text-yellow-400 hover:text-yellow-300">
|
||||
<Mail className="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Hiring Section */}
|
||||
<div className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8 text-center">
|
||||
<h2 className="text-2xl font-bold text-yellow-300 mb-4">Join Our Team</h2>
|
||||
<p className="text-yellow-200/80 mb-6 max-w-2xl mx-auto">
|
||||
We're always looking for talented researchers, engineers, and educators to join AeThex Labs
|
||||
</p>
|
||||
<Button className="bg-yellow-400 text-black hover:bg-yellow-300">
|
||||
View Open Positions
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -69,6 +69,7 @@ This ensures the Foundation's user-facing URLs display `aethex.foundation` in th
|
|||
- Fixed GitHub Actions workflows: icon generation pipeline, deprecated action updates, Vitest test command
|
||||
- **Landing Page Styling Alignment**: Updated hero CTAs and featured realm button to use shared Button component with asChild prop for consistent styling and ripple effects. Fixed Button component to support ripple animation for both native buttons and asChild elements. Removed unused backgroundGradient variable. Custom landing page cards (featured-card, stats-strip, hero-intro) intentionally use advanced CSS effects while still leveraging design tokens (--aethex-*, --foreground, --background, --muted, etc.).
|
||||
- **Get Started Page Enhancement**: Comprehensive onboarding page (`/get-started`) with: Stats/Social Proof section (animated counters: 12k+ builders, 500+ projects, 7 realms, 10 AI agents), Video Demo placeholder, 3-step guided signup flow, Platform Features section (6 cards: XP & Leveling, AI Agents, Creator Passports, Community, Badges, Security), Realms Overview (all 7 realms with descriptions and feature tags), Testimonials section (4 community quotes), and FAQ section (6 expandable questions). AnimatedCounter uses proper useRef cleanup for requestAnimationFrame.
|
||||
- **Axiom Model Code Cleanup**: Removed orphaned page files in `foundation/`, `gameforge/`, and `labs/` folders (20+ files) that were dead code since all routes redirect to external domains. Cleaned up unused imports from App.tsx. Routes continue to redirect: `/foundation/*` → aethex.foundation, `/gameforge/*` → aethex.foundation/gameforge, `/labs/*` → aethex.studio.
|
||||
|
||||
## External Dependencies
|
||||
- **Supabase**: Used for database (PostgreSQL), authentication, and real-time features.
|
||||
|
|
|
|||
Loading…
Reference in a new issue