✨ Transform GameForge, Labs, and Foundation into beautiful landing pages
- Add responsive design with md: breakpoints for tablet optimization - Create stunning hero sections with large logos and clear value props - Add informational sticky banners clarifying these are external platforms - GameForge: Add 30-day sprint timeline, squad structure, stats cards - Labs: Enhance with research projects, simplified messaging, clean design - Foundation: Spotlight GameForge program, mission & values section - All pages now have proper CTAs linking to external platforms - Fixed responsive sizing from mobile → tablet → desktop - Professional marketing page aesthetic while maintaining technical feel
This commit is contained in:
MrPiglr
GitHub
parent
4f89366d77
commit
b6b3cb6804
4 changed files with 823 additions and 343 deletions
|
|
@ -15,6 +15,7 @@ import {
|
|||
Sparkles,
|
||||
Trophy,
|
||||
Compass,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
|
|
@ -54,31 +55,76 @@ export default function Foundation() {
|
|||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black py-8">
|
||||
<div className="container mx-auto px-4 max-w-7xl space-y-12">
|
||||
{/* Hero Section */}
|
||||
<div className="space-y-6 animate-slide-down">
|
||||
<div className="space-y-2">
|
||||
<Badge className="w-fit bg-red-600/50 text-red-100">
|
||||
Non-Profit Guardian
|
||||
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black">
|
||||
{/* Informational Banner */}
|
||||
<div className="bg-red-500/10 border-b border-red-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<ExternalLink className="h-5 w-5 text-red-400" />
|
||||
<p className="text-sm text-red-200">
|
||||
<strong>External Platform:</strong> Foundation is hosted at{" "}
|
||||
<a href="https://aethex.foundation" className="underline font-semibold hover:text-red-300">
|
||||
aethex.foundation
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-red-400 text-black hover:bg-red-300"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation'}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Visit Platform
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 max-w-7xl space-y-20 py-16 lg:py-24">{/* Hero Section */}
|
||||
<div className="text-center space-y-8 animate-slide-down">
|
||||
<div className="flex justify-center mb-6">
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800"
|
||||
alt="Foundation Logo"
|
||||
className="h-32 w-32 object-contain drop-shadow-[0_0_50px_rgba(239,68,68,0.5)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 max-w-5xl mx-auto">
|
||||
<Badge className="border-red-400/50 bg-red-500/10 text-red-100 text-base px-4 py-1.5">
|
||||
<Heart className="h-5 w-5 mr-2" />
|
||||
501(c)(3) Non-Profit Organization
|
||||
</Badge>
|
||||
<h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-red-300 via-pink-300 to-red-300 bg-clip-text text-transparent">
|
||||
|
||||
<h1 className="text-5xl md:text-6xl lg:text-7xl font-black bg-gradient-to-r from-red-300 via-pink-300 to-red-300 bg-clip-text text-transparent">
|
||||
AeThex Foundation
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
Building community, empowering developers, and advancing game development through open-source innovation and mentorship.
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xl text-gray-300 max-w-2xl leading-relaxed">
|
||||
The heart of our ecosystem. We believe in building community,
|
||||
empowering developers, and advancing game development through
|
||||
open-source innovation and mentorship.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
||||
<Button
|
||||
onClick={() => navigate("/gameforge")}
|
||||
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-12 text-base"
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 shadow-[0_0_40px_rgba(239,68,68,0.3)] h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation'}
|
||||
>
|
||||
<ExternalLink className="h-5 w-5 mr-2" />
|
||||
Visit Foundation Platform
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
||||
>
|
||||
<Gamepad2 className="h-5 w-5 mr-2" />
|
||||
Join GameForge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => navigate("/mentorship")}
|
||||
variant="outline"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ import {
|
|||
TrendingUp,
|
||||
Rocket,
|
||||
ArrowRight,
|
||||
ExternalLink,
|
||||
Zap,
|
||||
Target,
|
||||
Code,
|
||||
Palette,
|
||||
Music,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
|
|
@ -47,300 +53,257 @@ export default function GameForge() {
|
|||
);
|
||||
}
|
||||
|
||||
const monthlyReleases = [
|
||||
{
|
||||
month: "January 2025",
|
||||
title: "Pixel Quest: Reckoning",
|
||||
genre: "Action-Adventure",
|
||||
team: "Green Squadron",
|
||||
status: "Shipping Now",
|
||||
highlights: "New combat system, 50 levels, multiplayer beta",
|
||||
},
|
||||
{
|
||||
month: "February 2025",
|
||||
title: "Logic Master Pro",
|
||||
genre: "Puzzle",
|
||||
team: "Logic Lab",
|
||||
status: "Pre-Production",
|
||||
highlights: "Daily challenges, leaderboards, cross-platform",
|
||||
},
|
||||
{
|
||||
month: "March 2025",
|
||||
title: "Mystic Realms: Awakening",
|
||||
genre: "RPG",
|
||||
team: "Adventure Wing",
|
||||
status: "Development",
|
||||
highlights: "Story driven, 100+ hours, procedural dungeons",
|
||||
},
|
||||
];
|
||||
|
||||
const pastReleases = [
|
||||
{
|
||||
title: "Battle Royale X",
|
||||
genre: "Action",
|
||||
releaseDate: "Dec 2024",
|
||||
players: "50K+",
|
||||
rating: 4.7,
|
||||
},
|
||||
{
|
||||
title: "Casual Match",
|
||||
genre: "Puzzle",
|
||||
releaseDate: "Nov 2024",
|
||||
players: "100K+",
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
title: "Speedrun Challenge",
|
||||
genre: "Action",
|
||||
releaseDate: "Oct 2024",
|
||||
players: "35K+",
|
||||
rating: 4.8,
|
||||
},
|
||||
];
|
||||
|
||||
const productionStats = [
|
||||
{ label: "Games Shipped", value: "15+" },
|
||||
{ label: "Monthly Cycle", value: "32 days" },
|
||||
{ label: "Total Players", value: "200K+" },
|
||||
{ label: "Team Size", value: "25 devs" },
|
||||
{ label: "Games Shipped", value: "15+", icon: Rocket },
|
||||
{ label: "Active Players", value: "200K+", icon: Users },
|
||||
{ label: "Team Members", value: "25", icon: Users },
|
||||
{ label: "Avg Development", value: "32 days", icon: Calendar },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: "30-Day Production Cycle",
|
||||
description: "Ship complete games from concept to live in under a month using proven development pipelines.",
|
||||
gradient: "from-green-500 to-emerald-500"
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Collaborative Teams",
|
||||
description: "Work alongside designers, developers, artists, and musicians in cross-functional squads.",
|
||||
gradient: "from-cyan-500 to-blue-500"
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Real Portfolio Projects",
|
||||
description: "Build your aethex.me passport with shipped games that prove your ability to execute.",
|
||||
gradient: "from-purple-500 to-pink-500"
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Proven Technology",
|
||||
description: "Use cutting-edge tools and frameworks developed by AeThex Labs for rapid game development.",
|
||||
gradient: "from-orange-500 to-red-500"
|
||||
},
|
||||
];
|
||||
|
||||
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%)]" />
|
||||
{/* Informational Banner */}
|
||||
<div className="bg-green-500/10 border-b border-green-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<ExternalLink className="h-5 w-5 text-green-400" />
|
||||
<p className="text-sm text-green-200">
|
||||
<strong>External Platform:</strong> GameForge is hosted at{" "}
|
||||
<a href="https://aethex.foundation/gameforge" className="underline font-semibold hover:text-green-300">
|
||||
aethex.foundation/gameforge
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Visit Platform
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Background Effects */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.15] [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" />
|
||||
<div className="pointer-events-none absolute top-20 left-10 w-96 h-96 bg-green-500/20 rounded-full blur-3xl animate-blob" />
|
||||
<div className="pointer-events-none absolute bottom-20 right-10 w-96 h-96 bg-emerald-600/15 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="py-16 lg:py-24">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="mb-8 flex justify-center">
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
|
||||
alt="GameForge Logo"
|
||||
className="h-24 w-24 object-contain drop-shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-6">
|
||||
<Gamepad2 className="h-4 w-4 mr-2" />
|
||||
GameForge Production
|
||||
</Badge>
|
||||
<section className="py-20 lg:py-32">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<div className="flex justify-center mb-6">
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
|
||||
alt="GameForge Logo"
|
||||
className="h-32 w-32 object-contain drop-shadow-[0_0_40px_rgba(34,197,94,0.5)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 mb-12">
|
||||
<h1 className={`text-4xl lg:text-6xl font-black text-green-300 leading-tight ${theme.fontClass}`}>
|
||||
Shipping Games Monthly
|
||||
</h1>
|
||||
<p className="text-xl text-green-100/70 max-w-3xl">
|
||||
AeThex GameForge is our internal production studio that
|
||||
demonstrates disciplined, efficient development. We ship a new
|
||||
game every month using proprietary development pipelines and
|
||||
tools from Labs, proving our technology's real-world impact
|
||||
while maintaining controlled burn rates.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-6 max-w-5xl mx-auto">
|
||||
<Badge className="border-green-400/50 bg-green-500/10 text-green-300 text-base px-4 py-1.5">
|
||||
<Gamepad2 className="h-5 w-5 mr-2" />
|
||||
Foundation's Game Production Studio
|
||||
</Badge>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 flex-wrap">
|
||||
<Button
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
onClick={() => navigate("/gameforge/view-portfolio")}
|
||||
>
|
||||
View Recent Releases
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/gameforge/join-gameforge")}
|
||||
>
|
||||
Meet the Team
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/creators?arm=gameforge")}
|
||||
>
|
||||
Browse GameForge Creators
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/opportunities?arm=gameforge")}
|
||||
>
|
||||
Find GameDev Jobs
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<h1 className={`text-5xl md:text-6xl lg:text-7xl font-black text-green-300 leading-tight ${theme.fontClass}`}>
|
||||
Ship Games Every Month
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-green-100/80 max-w-3xl mx-auto leading-relaxed">
|
||||
AeThex GameForge is a master-apprentice mentorship program where teams of 5 developers ship real games in 30-day sprints.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-green-400 text-black hover:bg-green-300 shadow-[0_0_40px_rgba(34,197,94,0.3)] h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
||||
>
|
||||
<ExternalLink className="mr-2 h-5 w-5" />
|
||||
Visit GameForge Platform
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-green-400/50 text-green-300 hover:bg-green-500/10 h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation'}
|
||||
>
|
||||
About Foundation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Production Stats */}
|
||||
<section className="py-12 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{productionStats.map((stat, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/30 border-green-400/40"
|
||||
>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-3xl font-black text-green-400 mb-2">
|
||||
{/* Stats Section */}
|
||||
<section className="py-16 border-y border-green-400/10 bg-black/40 backdrop-blur-sm">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{productionStats.map((stat, idx) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="text-center space-y-3 p-6 rounded-lg bg-green-950/30 border border-green-400/20 hover:border-green-400/40 transition-all hover:scale-105"
|
||||
>
|
||||
<Icon className="h-8 w-8 text-green-400 mx-auto" />
|
||||
<p className="text-4xl md:text-5xl font-black text-green-400">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-sm text-green-200/70">{stat.label}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Upcoming Releases */}
|
||||
<section className="py-16">
|
||||
{/* Features Grid */}
|
||||
<section className="py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-black text-green-300 mb-4">
|
||||
Why Join GameForge?
|
||||
</h2>
|
||||
<p className="text-xl text-green-100/70 max-w-3xl mx-auto">
|
||||
The fastest way to build a real game development portfolio and prove you can ship.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{features.map((feature, idx) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all hover:scale-105 group"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className={`w-14 h-14 rounded-xl bg-gradient-to-r ${feature.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
|
||||
<Icon className="h-7 w-7 text-white" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl text-green-300">
|
||||
{feature.title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/80 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<section className="py-20 lg:py-28 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 flex items-center gap-2">
|
||||
<Calendar className="h-8 w-8" />
|
||||
Upcoming Releases
|
||||
</h2>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-black text-green-300 mb-4">
|
||||
The 30-Day Sprint
|
||||
</h2>
|
||||
<p className="text-xl text-green-100/70">
|
||||
From concept to shipped game in one month
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{monthlyReleases.map((release, 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 gap-6">
|
||||
<div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 mb-3">
|
||||
{release.month}
|
||||
</Badge>
|
||||
<h3 className="text-xl font-bold text-green-300 mb-2">
|
||||
{release.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70 mb-3">
|
||||
{release.genre}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-green-400" />
|
||||
<span className="text-sm text-green-200/70">
|
||||
{release.team}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Badge className="bg-green-500/30 text-green-200 border border-green-400/60 mb-3">
|
||||
{release.status}
|
||||
</Badge>
|
||||
<p className="text-sm text-green-200/80">
|
||||
{release.highlights}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Past Releases */}
|
||||
<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">
|
||||
Shipped This Year
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{pastReleases.map((game, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6 space-y-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>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm text-green-200/70">
|
||||
<p>Released: {game.releaseDate}</p>
|
||||
<p>{game.players} active players</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>⭐ {game.rating}/5</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Production Process */}
|
||||
<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 Process
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
phase: "Ideation",
|
||||
duration: "1 week",
|
||||
description: "Brainstorm and validate game concepts",
|
||||
week: "Week 1",
|
||||
title: "Ideation & Prototyping",
|
||||
description: "Define game concept, create GDD, build playable prototype",
|
||||
tasks: ["Team formation", "Concept validation", "Core mechanics test"]
|
||||
},
|
||||
{
|
||||
phase: "Prototyping",
|
||||
duration: "1 week",
|
||||
description:
|
||||
"Build playable prototype to test core mechanics",
|
||||
week: "Week 2",
|
||||
title: "Development Sprint",
|
||||
description: "Parallel production: code, art, sound, narrative",
|
||||
tasks: ["Feature implementation", "Asset creation", "Level design"]
|
||||
},
|
||||
{
|
||||
phase: "Development",
|
||||
duration: "3 weeks",
|
||||
description:
|
||||
"Full production with parallel art, code, and design",
|
||||
week: "Week 3",
|
||||
title: "Polish & Integration",
|
||||
description: "Integrate assets, refine gameplay, balance mechanics",
|
||||
tasks: ["Bug fixing", "Playtesting", "Performance optimization"]
|
||||
},
|
||||
{
|
||||
phase: "Polish & QA",
|
||||
duration: "1 week",
|
||||
description: "Bug fixes, optimization, and player testing",
|
||||
week: "Week 4",
|
||||
title: "QA & Launch",
|
||||
description: "Final testing, deployment, and post-launch monitoring",
|
||||
tasks: ["Final QA", "Ship to aethex.fun", "Community showcase"]
|
||||
},
|
||||
{
|
||||
phase: "Launch",
|
||||
duration: "1 day",
|
||||
description:
|
||||
"Ship to production and monitor for first 24 hours",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
].map((phase, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/50 transition-all"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center 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}
|
||||
<CardContent className="p-8">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="h-16 w-16 rounded-xl bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center text-2xl font-black text-white shadow-lg">
|
||||
{idx + 1}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-green-300 mb-1">
|
||||
{item.phase}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{item.description}
|
||||
</p>
|
||||
<div className="flex-1 space-y-3">
|
||||
<div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 mb-2">
|
||||
{phase.week}
|
||||
</Badge>
|
||||
<h3 className="text-2xl font-bold text-green-300 mb-2">
|
||||
{phase.title}
|
||||
</h3>
|
||||
<p className="text-green-200/80 text-lg">
|
||||
{phase.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{phase.tasks.map((task, taskIdx) => (
|
||||
<Badge key={taskIdx} variant="outline" className="border-green-400/30 text-green-300 text-sm">
|
||||
{task}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
|
||||
{item.duration}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -349,23 +312,91 @@ export default function GameForge() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team 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">
|
||||
Part of Our Shipping Culture
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Our team represents the best of game development talent. Meet
|
||||
the people who make monthly shipping possible.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300"
|
||||
onClick={() => navigate("/gameforge/join-gameforge")}
|
||||
>
|
||||
Meet the Team
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
{/* Team Roles */}
|
||||
<section className="py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-black text-green-300 mb-4">
|
||||
Squad Structure
|
||||
</h2>
|
||||
<p className="text-xl text-green-100/70">
|
||||
Every team has 5 members with specialized roles
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-6">
|
||||
{[
|
||||
{ role: "Forge Master", icon: Target, description: "Mentor & Lead", color: "from-green-500 to-emerald-500" },
|
||||
{ role: "Scripter", icon: Code, description: "Programming", color: "from-blue-500 to-cyan-500" },
|
||||
{ role: "Builder", icon: Palette, description: "Art & Design", color: "from-purple-500 to-pink-500" },
|
||||
{ role: "Sound Designer", icon: Music, description: "Audio & Music", color: "from-orange-500 to-red-500" },
|
||||
{ role: "Narrative", icon: Users, description: "Story & UX", color: "from-yellow-500 to-amber-500" },
|
||||
].map((member, idx) => {
|
||||
const Icon = member.icon;
|
||||
return (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all hover:scale-105 text-center"
|
||||
>
|
||||
<CardContent className="pt-8 pb-6 space-y-4">
|
||||
<div className={`w-16 h-16 rounded-xl bg-gradient-to-r ${member.color} flex items-center justify-center mx-auto shadow-lg`}>
|
||||
<Icon className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300 mb-1">
|
||||
{member.role}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{member.description}
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 lg:py-32 border-t border-green-400/10">
|
||||
<div className="container mx-auto max-w-5xl px-4">
|
||||
<Card className="bg-gradient-to-r from-green-600/20 via-emerald-600/10 to-green-600/20 border-green-500/50 overflow-hidden relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.1)_0%,transparent_70%)]" />
|
||||
<CardContent className="p-12 lg:p-16 text-center space-y-8 relative z-10">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-4xl md:text-5xl font-black text-white">
|
||||
Ready to Ship Your First Game?
|
||||
</h2>
|
||||
<p className="text-xl text-green-100 max-w-2xl mx-auto">
|
||||
Join the next GameForge cohort and build your portfolio with real, shipped games.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-green-400 text-black hover:bg-green-300 shadow-[0_0_40px_rgba(34,197,94,0.4)] h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
||||
>
|
||||
<Rocket className="mr-2 h-5 w-5" />
|
||||
Join GameForge Now
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-green-400/50 text-green-300 hover:bg-green-500/10 h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation'}
|
||||
>
|
||||
Learn About Foundation
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-green-300/60 pt-4">
|
||||
Part of the AeThex Foundation 501(c)(3) non-profit
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
409
client/pages/GameForge_old.tsx
Normal file
409
client/pages/GameForge_old.tsx
Normal file
|
|
@ -0,0 +1,409 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { useArmTheme } from "@/contexts/ArmThemeContext";
|
||||
import {
|
||||
Gamepad2,
|
||||
Calendar,
|
||||
Users,
|
||||
TrendingUp,
|
||||
Rocket,
|
||||
ArrowRight,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import LoadingScreen from "@/components/LoadingScreen";
|
||||
import { useArmToast } from "@/hooks/use-arm-toast";
|
||||
|
||||
export default function GameForge() {
|
||||
const navigate = useNavigate();
|
||||
const { theme } = useArmTheme();
|
||||
const armToast = useArmToast();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const toastShownRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
if (!toastShownRef.current) {
|
||||
armToast.system("GameForge engine initialized");
|
||||
toastShownRef.current = true;
|
||||
}
|
||||
}, 900);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [armToast]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<LoadingScreen
|
||||
message="Booting GameForge Engine..."
|
||||
showProgress={true}
|
||||
duration={900}
|
||||
accentColor="from-green-500 to-green-400"
|
||||
armLogo="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const monthlyReleases = [
|
||||
{
|
||||
month: "January 2025",
|
||||
title: "Pixel Quest: Reckoning",
|
||||
genre: "Action-Adventure",
|
||||
team: "Green Squadron",
|
||||
status: "Shipping Now",
|
||||
highlights: "New combat system, 50 levels, multiplayer beta",
|
||||
},
|
||||
{
|
||||
month: "February 2025",
|
||||
title: "Logic Master Pro",
|
||||
genre: "Puzzle",
|
||||
team: "Logic Lab",
|
||||
status: "Pre-Production",
|
||||
highlights: "Daily challenges, leaderboards, cross-platform",
|
||||
},
|
||||
{
|
||||
month: "March 2025",
|
||||
title: "Mystic Realms: Awakening",
|
||||
genre: "RPG",
|
||||
team: "Adventure Wing",
|
||||
status: "Development",
|
||||
highlights: "Story driven, 100+ hours, procedural dungeons",
|
||||
},
|
||||
];
|
||||
|
||||
const pastReleases = [
|
||||
{
|
||||
title: "Battle Royale X",
|
||||
genre: "Action",
|
||||
releaseDate: "Dec 2024",
|
||||
players: "50K+",
|
||||
rating: 4.7,
|
||||
},
|
||||
{
|
||||
title: "Casual Match",
|
||||
genre: "Puzzle",
|
||||
releaseDate: "Nov 2024",
|
||||
players: "100K+",
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
title: "Speedrun Challenge",
|
||||
genre: "Action",
|
||||
releaseDate: "Oct 2024",
|
||||
players: "35K+",
|
||||
rating: 4.8,
|
||||
},
|
||||
];
|
||||
|
||||
const productionStats = [
|
||||
{ label: "Games Shipped", value: "15+" },
|
||||
{ label: "Monthly Cycle", value: "32 days" },
|
||||
{ label: "Total Players", value: "200K+" },
|
||||
{ label: "Team Size", value: "25 devs" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Informational Banner */}
|
||||
<div className="bg-green-500/10 border-b border-green-400/30 py-3">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<ExternalLink className="h-5 w-5 text-green-400" />
|
||||
<p className="text-sm text-green-200">
|
||||
This is an <strong>informational page</strong>. GameForge is hosted at{" "}
|
||||
<a href="https://aethex.foundation/gameforge" className="underline font-semibold hover:text-green-300">
|
||||
aethex.foundation/gameforge
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Go to Platform
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{/* Hero Section */}
|
||||
<section className="py-16 lg:py-24">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="mb-8 flex justify-center">
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
|
||||
alt="GameForge Logo"
|
||||
className="h-24 w-24 object-contain drop-shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-6">
|
||||
<Gamepad2 className="h-4 w-4 mr-2" />
|
||||
GameForge Production
|
||||
</Badge>
|
||||
|
||||
<div className="space-y-6 mb-12">
|
||||
<h1 className={`text-4xl md:text-5xl lg:text-6xl font-black text-green-300 leading-tight ${theme.fontClass}`}>
|
||||
Shipping Games Monthly
|
||||
</h1>
|
||||
<p className="text-xl text-green-100/70 max-w-3xl">
|
||||
AeThex GameForge is our internal production studio that
|
||||
demonstrates disciplined, efficient development. We ship a new
|
||||
game every month using proprietary development pipelines and
|
||||
tools from Labs, proving our technology's real-world impact
|
||||
while maintaining controlled burn rates.
|
||||
</p>
|
||||
<div className="flex items-center gap-3 p-4 bg-green-500/10 border border-green-400/30 rounded-lg">
|
||||
<ExternalLink className="h-5 w-5 text-green-400" />
|
||||
<p className="text-sm text-green-200">
|
||||
<strong>GameForge is hosted at aethex.foundation</strong> as part of the non-profit Foundation entity.
|
||||
This page provides an overview—visit the platform for full access.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 flex-wrap">
|
||||
<Button
|
||||
className="bg-green-400 text-black hover:bg-green-300 shadow-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
|
||||
>
|
||||
<ExternalLink className="mr-2 h-5 w-5" />
|
||||
Visit GameForge Platform
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/gameforge/join-gameforge")}
|
||||
>
|
||||
Meet the Team
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/creators?arm=gameforge")}
|
||||
>
|
||||
Browse GameForge Creators
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/opportunities?arm=gameforge")}
|
||||
>
|
||||
Find GameDev Jobs
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Production Stats */}
|
||||
<section className="py-12 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{productionStats.map((stat, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/30 border-green-400/40"
|
||||
>
|
||||
<CardContent className="pt-6 text-center">
|
||||
<p className="text-3xl font-black text-green-400 mb-2">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-sm text-green-200/70">{stat.label}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Upcoming Releases */}
|
||||
<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 flex items-center gap-2">
|
||||
<Calendar className="h-8 w-8" />
|
||||
Upcoming Releases
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{monthlyReleases.map((release, 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 gap-6">
|
||||
<div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 mb-3">
|
||||
{release.month}
|
||||
</Badge>
|
||||
<h3 className="text-xl font-bold text-green-300 mb-2">
|
||||
{release.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70 mb-3">
|
||||
{release.genre}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-green-400" />
|
||||
<span className="text-sm text-green-200/70">
|
||||
{release.team}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Badge className="bg-green-500/30 text-green-200 border border-green-400/60 mb-3">
|
||||
{release.status}
|
||||
</Badge>
|
||||
<p className="text-sm text-green-200/80">
|
||||
{release.highlights}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Past Releases */}
|
||||
<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">
|
||||
Shipped This Year
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{pastReleases.map((game, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6 space-y-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>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm text-green-200/70">
|
||||
<p>Released: {game.releaseDate}</p>
|
||||
<p>{game.players} active players</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>⭐ {game.rating}/5</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Production Process */}
|
||||
<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 Process
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{
|
||||
phase: "Ideation",
|
||||
duration: "1 week",
|
||||
description: "Brainstorm and validate game concepts",
|
||||
},
|
||||
{
|
||||
phase: "Prototyping",
|
||||
duration: "1 week",
|
||||
description:
|
||||
"Build playable prototype to test core mechanics",
|
||||
},
|
||||
{
|
||||
phase: "Development",
|
||||
duration: "3 weeks",
|
||||
description:
|
||||
"Full production with parallel art, code, and design",
|
||||
},
|
||||
{
|
||||
phase: "Polish & QA",
|
||||
duration: "1 week",
|
||||
description: "Bug fixes, optimization, and player testing",
|
||||
},
|
||||
{
|
||||
phase: "Launch",
|
||||
duration: "1 day",
|
||||
description:
|
||||
"Ship to production and monitor for first 24 hours",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center 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-1">
|
||||
{item.phase}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
|
||||
{item.duration}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team 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">
|
||||
Part of Our Shipping Culture
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Our team represents the best of game development talent. Meet
|
||||
the people who make monthly shipping possible.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300"
|
||||
onClick={() => navigate("/gameforge/join-gameforge")}
|
||||
>
|
||||
Meet the Team
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -112,6 +112,31 @@ export default function Labs() {
|
|||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Informational Banner */}
|
||||
<div className="bg-yellow-500/10 border-b border-yellow-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<ExternalLink className="h-5 w-5 text-yellow-400" />
|
||||
<p className="text-sm text-yellow-200">
|
||||
<strong>External Platform:</strong> Labs is hosted at{" "}
|
||||
<a href="https://aethex.studio" className="underline font-semibold hover:text-yellow-300">
|
||||
aethex.studio
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
onClick={() => window.location.href = 'https://aethex.studio'}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
Visit Studio
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cyberpunk Background Effects */}
|
||||
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#facc15_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(250,204,21,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
||||
|
|
@ -120,82 +145,51 @@ export default function Labs() {
|
|||
<div className="pointer-events-none absolute bottom-20 right-10 w-96 h-96 bg-yellow-600/10 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Hero Section - L.A.B.S. Interface */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28 border-b border-yellow-400/10">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<div className="flex justify-center mb-4">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-32">
|
||||
<div className="container mx-auto max-w-7xl px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<div className="flex justify-center mb-6">
|
||||
<img
|
||||
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fd93f7113d34347469e74421c3a3412e5?format=webp&width=800"
|
||||
alt="Labs Logo"
|
||||
className="h-24 w-24 object-contain drop-shadow-lg filter drop-shadow-[0_0_20px_rgba(251,191,36,0.4)]"
|
||||
className="h-32 w-32 object-contain drop-shadow-[0_0_50px_rgba(251,191,36,0.6)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 shadow-[0_0_20px_rgba(250,204,21,0.2)]">
|
||||
<span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-yellow-300" />
|
||||
Research & Development Uplink
|
||||
</Badge>
|
||||
<div className="space-y-6 max-w-5xl mx-auto">
|
||||
<Badge className="border-yellow-400/50 bg-yellow-500/10 text-yellow-300 text-base px-4 py-1.5">
|
||||
<Sparkles className="h-5 w-5 mr-2" />
|
||||
Advanced Research & Development
|
||||
</Badge>
|
||||
|
||||
<div>
|
||||
<h1 className={`text-5xl lg:text-7xl font-black text-yellow-300 leading-tight mb-4 ${theme.fontClass}`}>
|
||||
<h1 className={`text-5xl md:text-6xl lg:text-7xl font-black text-yellow-300 leading-tight ${theme.fontClass}`}>
|
||||
The Innovation Engine
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/90 mb-4">
|
||||
Real-time window into the AeThex Labs mainframe.
|
||||
Breakthrough R&D pushing the boundaries of what's possible.
|
||||
|
||||
<p className="text-xl md:text-2xl text-yellow-100/80 max-w-3xl mx-auto leading-relaxed">
|
||||
Breakthrough R&D pushing the boundaries of what's possible in software, AI, games, and digital experiences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-xl text-yellow-100/80 max-w-3xl">
|
||||
AeThex Labs is our dedicated R&D pillar, focused on
|
||||
breakthrough technologies that create lasting competitive
|
||||
advantage. Applied R&D pushing the boundaries of what's
|
||||
possible in software, games, and digital experiences.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
|
||||
<Button
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300 shadow-[0_0_30px_rgba(250,204,21,0.35)]"
|
||||
onClick={() => navigate("/labs/explore-research")}
|
||||
size="lg"
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300 shadow-[0_0_40px_rgba(250,204,21,0.4)] h-14 px-8 text-lg"
|
||||
onClick={() => window.location.href = 'https://aethex.studio'}
|
||||
>
|
||||
<Microscope className="mr-2 h-5 w-5" />
|
||||
Explore Research
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
<ExternalLink className="mr-2 h-5 w-5" />
|
||||
Visit Labs Studio
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-yellow-400/40 text-yellow-300 hover:bg-yellow-500/10"
|
||||
className="border-yellow-400/50 text-yellow-300 hover:bg-yellow-500/10 h-14 px-8 text-lg"
|
||||
onClick={() => navigate("/careers")}
|
||||
>
|
||||
Join Our Team
|
||||
Join Research Team
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Creator Network CTAs */}
|
||||
<div className="pt-8 border-t border-yellow-400/20 w-full">
|
||||
<p className="text-sm text-yellow-200/70 mb-4">
|
||||
Explore our creator community:
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-yellow-400/30 text-yellow-300 hover:bg-yellow-500/10"
|
||||
onClick={() => navigate("/creators?arm=labs")}
|
||||
>
|
||||
Browse Labs Creators
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-yellow-400/30 text-yellow-300 hover:bg-yellow-500/10"
|
||||
onClick={() => navigate("/opportunities?arm=labs")}
|
||||
>
|
||||
View Labs Opportunities
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue