Create comprehensive Game Development page
cgen-99cdf4d7d53b49b19b97d4d8cd0e1333
This commit is contained in:
Builder.io
parent
2443886384
commit
180dd82a4c
1 changed files with 488 additions and 0 deletions
488
client/pages/GameDevelopment.tsx
Normal file
488
client/pages/GameDevelopment.tsx
Normal file
|
|
@ -0,0 +1,488 @@
|
|||
import { useState, useEffect } from "react";
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsLoading(false);
|
||||
aethexToast.system("Game Development services loaded successfully");
|
||||
}, 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: "100K+ visits",
|
||||
rating: 4.7,
|
||||
category: "Simulation"
|
||||
}
|
||||
];
|
||||
|
||||
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-20 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="/contact" 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-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-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-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>
|
||||
|
||||
{/* Portfolio 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">
|
||||
Featured Projects
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Showcasing our latest game development achievements
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
{portfolio.map((project, 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` }}
|
||||
>
|
||||
<div className="absolute top-4 right-4 z-10">
|
||||
<Badge variant="outline" className="bg-background/80">
|
||||
{project.category}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<CardHeader>
|
||||
<div className="space-y-2">
|
||||
<CardTitle className="text-lg">{project.title}</CardTitle>
|
||||
<CardDescription>{project.description}</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{project.tech.map((tech, techIndex) => (
|
||||
<Badge key={techIndex} variant="secondary" className="text-xs">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">{project.players}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-1">
|
||||
<Star className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-sm font-semibold">{project.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="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 items-start 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 mr-6 glow-blue">
|
||||
{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-12 w-0.5 h-12 bg-gradient-to-b from-aethex-400 to-transparent" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="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-lg px-8 py-6">
|
||||
<Link to="/contact" 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-lg px-8 py-6">
|
||||
<Link to="/onboarding">Join Our Team</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue