635 lines
23 KiB
TypeScript
635 lines
23 KiB
TypeScript
import { useState, useEffect, useRef } from "react";
|
|
|
|
const API_BASE = import.meta.env.VITE_API_BASE || "";
|
|
|
|
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import LoadingScreen from "@/components/LoadingScreen";
|
|
import { aethexToast } from "@/lib/aethex-toast";
|
|
import { Link } from "react-router-dom";
|
|
import {
|
|
Gamepad2,
|
|
Code,
|
|
Sparkles,
|
|
Zap,
|
|
Users,
|
|
Trophy,
|
|
Rocket,
|
|
Target,
|
|
Star,
|
|
Play,
|
|
ArrowRight,
|
|
CheckCircle,
|
|
Clock,
|
|
DollarSign,
|
|
Shield,
|
|
Cpu,
|
|
Palette,
|
|
Volume2,
|
|
Globe,
|
|
Smartphone,
|
|
} from "lucide-react";
|
|
|
|
export default function GameDevelopment() {
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [activeService, setActiveService] = useState(0);
|
|
|
|
const toastShownRef = useRef(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setIsLoading(false);
|
|
if (!toastShownRef.current) {
|
|
aethexToast.system("Game Development services loaded successfully");
|
|
toastShownRef.current = true;
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
const services = [
|
|
{
|
|
title: "Custom Game Development",
|
|
description: "End-to-end game creation from concept to deployment",
|
|
icon: Gamepad2,
|
|
features: [
|
|
"Full-stack development",
|
|
"Multi-platform support",
|
|
"Performance optimization",
|
|
"Live deployment",
|
|
],
|
|
timeline: "3-12 months",
|
|
price: "Custom pricing",
|
|
color: "from-blue-500 to-purple-600",
|
|
},
|
|
{
|
|
title: "Roblox Development",
|
|
description: "Specialized Roblox game creation and scripting",
|
|
icon: Code,
|
|
features: [
|
|
"Lua scripting",
|
|
"UI/UX design",
|
|
"Monetization setup",
|
|
"Analytics integration",
|
|
],
|
|
timeline: "2-8 weeks",
|
|
price: "Starting at $2,500",
|
|
color: "from-green-500 to-blue-600",
|
|
},
|
|
{
|
|
title: "Game Porting",
|
|
description: "Adapt existing games to new platforms and devices",
|
|
icon: Smartphone,
|
|
features: [
|
|
"Cross-platform compatibility",
|
|
"Performance tuning",
|
|
"Platform-specific features",
|
|
"Quality assurance",
|
|
],
|
|
timeline: "4-16 weeks",
|
|
price: "Starting at $5,000",
|
|
color: "from-orange-500 to-red-600",
|
|
},
|
|
{
|
|
title: "Game Optimization",
|
|
description: "Enhance performance and user experience of existing games",
|
|
icon: Zap,
|
|
features: [
|
|
"Performance profiling",
|
|
"Memory optimization",
|
|
"Load time reduction",
|
|
"Frame rate improvement",
|
|
],
|
|
timeline: "2-6 weeks",
|
|
price: "Starting at $1,500",
|
|
color: "from-purple-500 to-pink-600",
|
|
},
|
|
];
|
|
|
|
const technologies = [
|
|
{ name: "Unity 3D", icon: Cpu, category: "Engine" },
|
|
{ name: "Unreal Engine", icon: Cpu, category: "Engine" },
|
|
{ name: "Roblox Studio", icon: Code, category: "Platform" },
|
|
{ name: "C#", icon: Code, category: "Language" },
|
|
{ name: "Lua", icon: Code, category: "Language" },
|
|
{ name: "JavaScript", icon: Code, category: "Language" },
|
|
{ name: "Blender", icon: Palette, category: "3D Modeling" },
|
|
{ name: "Photoshop", icon: Palette, category: "Graphics" },
|
|
{ name: "FMOD", icon: Volume2, category: "Audio" },
|
|
];
|
|
|
|
const portfolio = [
|
|
{
|
|
title: "Neural Combat Arena",
|
|
description:
|
|
"AI-powered multiplayer battle arena with dynamic environments",
|
|
tech: ["Unity", "C#", "Photon"],
|
|
players: "10K+ active",
|
|
rating: 4.8,
|
|
category: "Action",
|
|
},
|
|
{
|
|
title: "Quantum Puzzle Lab",
|
|
description: "Mind-bending puzzle game with quantum mechanics simulation",
|
|
tech: ["Custom Engine", "C++", "OpenGL"],
|
|
players: "25K+ downloads",
|
|
rating: 4.9,
|
|
category: "Puzzle",
|
|
},
|
|
{
|
|
title: "Roblox Tycoon Empire",
|
|
description: "Business simulation with advanced economy systems",
|
|
tech: ["Roblox Studio", "Lua", "DataStore"],
|
|
players: "1B+ visits",
|
|
rating: 4.7,
|
|
category: "Simulation",
|
|
},
|
|
];
|
|
|
|
type Studio = {
|
|
name: string;
|
|
tagline?: string;
|
|
metrics?: string;
|
|
specialties?: string[];
|
|
};
|
|
|
|
const defaultStudios: Studio[] = [
|
|
{
|
|
name: "Lone Star Studio",
|
|
tagline: "Indie craftsmanship with AAA polish",
|
|
metrics: "Top-rated indie hits",
|
|
specialties: ["Unity", "Unreal", "Pixel Art"],
|
|
},
|
|
{
|
|
name: "AeThex | GameForge",
|
|
tagline: "High-performance cross-platform experiences",
|
|
metrics: "Billions of player sessions",
|
|
specialties: ["Roblox", "Backend", "LiveOps"],
|
|
},
|
|
{
|
|
name: "Gaming Control",
|
|
tagline: "Strategy, simulation, and systems-first design",
|
|
metrics: "Award-winning franchises",
|
|
specialties: ["Simulation", "AI/ML", "Economy"],
|
|
},
|
|
];
|
|
|
|
const [studios, setStudios] = useState<Studio[]>([]);
|
|
useEffect(() => {
|
|
fetch(`${API_BASE}/api/featured-studios`)
|
|
.then((r) => (r.ok ? r.json() : []))
|
|
.then((data) => (Array.isArray(data) ? setStudios(data) : undefined))
|
|
.catch(() => undefined);
|
|
}, []);
|
|
|
|
const process = [
|
|
{
|
|
step: 1,
|
|
title: "Discovery & Planning",
|
|
description:
|
|
"We analyze your vision, target audience, and technical requirements",
|
|
duration: "1-2 weeks",
|
|
deliverables: [
|
|
"Project roadmap",
|
|
"Technical specifications",
|
|
"Art direction",
|
|
],
|
|
},
|
|
{
|
|
step: 2,
|
|
title: "Prototyping",
|
|
description: "Create playable prototypes to validate core mechanics",
|
|
duration: "2-4 weeks",
|
|
deliverables: [
|
|
"Playable prototype",
|
|
"Mechanics validation",
|
|
"User feedback analysis",
|
|
],
|
|
},
|
|
{
|
|
step: 3,
|
|
title: "Production",
|
|
description:
|
|
"Full development with regular milestones and client reviews",
|
|
duration: "8-40 weeks",
|
|
deliverables: ["Weekly builds", "Progress reports", "Quality assurance"],
|
|
},
|
|
{
|
|
step: 4,
|
|
title: "Launch & Support",
|
|
description: "Deployment, marketing support, and ongoing maintenance",
|
|
duration: "Ongoing",
|
|
deliverables: [
|
|
"Live deployment",
|
|
"Performance monitoring",
|
|
"Update releases",
|
|
],
|
|
},
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Loading Game Development services..."
|
|
showProgress={true}
|
|
duration={1000}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-aethex-gradient">
|
|
{/* Hero Section */}
|
|
<section className="relative py-16 sm:py-24 lg:py-32 overflow-hidden">
|
|
<div className="absolute inset-0 opacity-10">
|
|
{[...Array(30)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute text-aethex-400 animate-float"
|
|
style={{
|
|
left: `${Math.random() * 100}%`,
|
|
top: `${Math.random() * 100}%`,
|
|
animationDelay: `${Math.random() * 3}s`,
|
|
animationDuration: `${3 + Math.random() * 2}s`,
|
|
fontSize: `${8 + Math.random() * 6}px`,
|
|
}}
|
|
>
|
|
{"🎮🕹️🎯🏆".charAt(Math.floor(Math.random() * 4))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 text-center relative z-10">
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
|
|
>
|
|
<Gamepad2 className="h-3 w-3 mr-1" />
|
|
Game Development Division
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold leading-tight">
|
|
<span className="text-gradient-purple">
|
|
Crafting Digital Worlds
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
From concept to launch, we create immersive gaming experiences
|
|
that captivate players and push the boundaries of interactive
|
|
entertainment.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
|
|
>
|
|
<Link
|
|
to="/engage#game-development"
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Rocket className="h-5 w-5" />
|
|
<span>Start Your Project</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-border/50 hover-lift"
|
|
>
|
|
<Link to="/docs">View Portfolio</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<section className="py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Our Game Development Services
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Comprehensive solutions for every stage of game development
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-6xl mx-auto">
|
|
{services.map((service, index) => {
|
|
const Icon = service.icon;
|
|
const isActive = activeService === index;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className={`relative overflow-hidden transition-all duration-500 hover-lift cursor-pointer animate-scale-in ${
|
|
isActive
|
|
? "border-aethex-500 glow-blue scale-105"
|
|
: "border-border/50 hover:border-aethex-400/50"
|
|
}`}
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
onClick={() => setActiveService(index)}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div
|
|
className={`p-3 rounded-lg bg-gradient-to-r ${service.color} transition-all duration-300 hover:scale-110`}
|
|
>
|
|
<Icon className="h-6 w-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<CardTitle
|
|
className={`text-xl ${isActive ? "text-gradient" : ""}`}
|
|
>
|
|
{service.title}
|
|
</CardTitle>
|
|
<CardDescription className="mt-1">
|
|
{service.description}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
{service.features.map((feature, featureIndex) => (
|
|
<div
|
|
key={featureIndex}
|
|
className="flex items-center space-x-2 text-sm"
|
|
>
|
|
<CheckCircle className="h-3 w-3 text-aethex-400 flex-shrink-0" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-4 border-t border-border/30">
|
|
<div className="flex items-center space-x-2 text-sm text-muted-foreground">
|
|
<Clock className="h-4 w-4" />
|
|
<span>{service.timeline}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-sm font-semibold text-aethex-400">
|
|
<DollarSign className="h-4 w-4" />
|
|
<span>{service.price}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Technologies Section */}
|
|
<section className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Technologies We Master
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Cutting-edge tools and frameworks for modern game development
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 max-w-4xl mx-auto">
|
|
{technologies.map((tech, index) => {
|
|
const Icon = tech.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.05}s` }}
|
|
>
|
|
<CardContent className="p-4 text-center">
|
|
<Icon className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold text-sm">{tech.name}</h3>
|
|
<Badge variant="outline" className="mt-1 text-xs">
|
|
{tech.category}
|
|
</Badge>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Studios Section */}
|
|
<section className="py-16 sm:py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Featured Studios
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Hand-picked studios powering AeThex game development
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
|
{studios.map((studio, index) => (
|
|
<Card
|
|
key={index}
|
|
className="relative overflow-hidden border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-up"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div className="space-y-2">
|
|
<CardTitle className="text-lg">{studio.name}</CardTitle>
|
|
{studio.tagline && (
|
|
<CardDescription>{studio.tagline}</CardDescription>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4">
|
|
{studio.specialties?.length ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{studio.specialties.map((tech, techIndex) => (
|
|
<Badge
|
|
key={techIndex}
|
|
variant="secondary"
|
|
className="text-xs"
|
|
>
|
|
{tech}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{studio.metrics ? (
|
|
<div className="flex items-center justify-between text-sm">
|
|
<div className="flex items-center space-x-2 text-muted-foreground">
|
|
<Users className="h-4 w-4" />
|
|
<span>{studio.metrics}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<Star className="h-4 w-4 text-yellow-500" />
|
|
<span className="font-semibold">Top Rated</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Development Process */}
|
|
<section className="py-16 sm:py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Our Development Process
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Structured approach ensuring quality and timely delivery
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto">
|
|
{process.map((phase, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative flex flex-col sm:flex-row items-start gap-4 sm:gap-6 mb-12 animate-slide-right"
|
|
style={{ animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
{/* Step Number */}
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-r from-aethex-500 to-neon-blue flex items-center justify-center text-white font-bold glow-blue sm:mr-6">
|
|
{phase.step}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1">
|
|
<Card className="bg-card/50 border-border/50 hover:border-aethex-400/50 transition-all duration-300">
|
|
<CardContent className="p-6">
|
|
<div className="grid md:grid-cols-3 gap-4">
|
|
<div className="md:col-span-2">
|
|
<h3 className="text-xl font-semibold text-gradient mb-2">
|
|
{phase.title}
|
|
</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
{phase.description}
|
|
</p>
|
|
<div className="flex flex-wrap gap-1">
|
|
{phase.deliverables.map(
|
|
(deliverable, delIndex) => (
|
|
<Badge
|
|
key={delIndex}
|
|
variant="outline"
|
|
className="text-xs"
|
|
>
|
|
{deliverable}
|
|
</Badge>
|
|
),
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Badge className="bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 text-aethex-300 border-aethex-400/50">
|
|
<Clock className="h-3 w-3 mr-1" />
|
|
{phase.duration}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Connector Line */}
|
|
{index < process.length - 1 && (
|
|
<div className="absolute left-6 top-14 hidden sm:block w-0.5 h-12 bg-gradient-to-b from-aethex-400 to-transparent" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-16 sm:py-20 bg-background/30">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
|
|
Ready to Build Your Game?
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground">
|
|
Let's transform your vision into an engaging gaming experience
|
|
that players will love.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
|
|
>
|
|
<Link
|
|
to="/engage#game-development"
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<Play className="h-5 w-5" />
|
|
<span>Start Your Project</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-base sm:text-lg px-6 py-4 sm:px-8 sm:py-6"
|
|
>
|
|
<Link to="/onboarding">Join Our Team</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 mt-12">
|
|
<div className="text-center">
|
|
<Shield className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Enterprise Security</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Your IP is protected
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Globe className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Global Reach</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Worldwide deployment
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Trophy className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Award Winning</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Industry recognition
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|