Redesign StartBuilding as interactive learning paths with step progression
cgen-680a6e4bff2d4cd6af37aa7778e30aec
This commit is contained in:
Builder.io
parent
de6c31dd8e
commit
ebe2399a95
3 changed files with 629 additions and 292 deletions
|
|
@ -1,17 +1,100 @@
|
|||
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, Zap, Target, Heart } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Users, CheckCircle, Quote } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface TeamMember {
|
||||
id: number;
|
||||
name: string;
|
||||
role: string;
|
||||
bio: string;
|
||||
expertise: string[];
|
||||
image: string;
|
||||
}
|
||||
|
||||
interface Testimonial {
|
||||
id: number;
|
||||
author: string;
|
||||
role: string;
|
||||
company: string;
|
||||
quote: string;
|
||||
result: string;
|
||||
}
|
||||
|
||||
const TEAM_MEMBERS: TeamMember[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Sarah Chen",
|
||||
role: "Lead Developer",
|
||||
bio: "15+ years in game development. Previously shipped 20+ titles.",
|
||||
expertise: ["Game Architecture", "Performance", "Team Leadership"],
|
||||
image: "https://via.placeholder.com/150/22c55e/000000?text=SC",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Marcus Johnson",
|
||||
role: "Community Lead",
|
||||
bio: "Built communities with 100k+ active developers across platforms.",
|
||||
expertise: ["Community Building", "Mentorship", "Events"],
|
||||
image: "https://via.placeholder.com/150/22c55e/000000?text=MJ",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Elena Rodriguez",
|
||||
role: "Product Manager",
|
||||
bio: "Passionate about making game dev tools accessible to everyone.",
|
||||
expertise: ["Product Strategy", "UX Design", "Developer Experience"],
|
||||
image: "https://via.placeholder.com/150/22c55e/000000?text=ER",
|
||||
},
|
||||
];
|
||||
|
||||
const TESTIMONIALS: Testimonial[] = [
|
||||
{
|
||||
id: 1,
|
||||
author: "James Park",
|
||||
role: "Indie Developer",
|
||||
company: "Park Studios",
|
||||
quote:
|
||||
"GameForge transformed how we ship games. Monthly releases that used to take quarters are now our standard.",
|
||||
result: "+300% faster development cycle",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: "Olivia Smith",
|
||||
role: "Game Designer",
|
||||
company: "Creative Digital",
|
||||
quote:
|
||||
"The community support and resources made all the difference. I went from zero to published in 6 months.",
|
||||
result: "1st game launched successfully",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author: "David Kumar",
|
||||
role: "Technical Lead",
|
||||
company: "Quantum Games",
|
||||
quote:
|
||||
"Best decision we made was joining GameForge. The tooling alone saved us months of development time.",
|
||||
result: "Saved 4 months of dev time",
|
||||
},
|
||||
];
|
||||
|
||||
const MEMBERSHIP_BENEFITS = [
|
||||
"Priority access to new features and tools",
|
||||
"Monthly revenue sharing from successful games",
|
||||
"Dedicated technical support and mentorship",
|
||||
"Featured placement in our game gallery",
|
||||
"Access to exclusive GameForge community events",
|
||||
"Co-marketing opportunities with AeThex",
|
||||
];
|
||||
|
||||
export default function GameForgeJoinGameForge() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid 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" />
|
||||
|
|
@ -19,121 +102,138 @@ export default function GameForgeJoinGameForge() {
|
|||
<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="relative overflow-hidden py-20 lg:py-28">
|
||||
<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">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
{/* 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
|
||||
variant="outline"
|
||||
className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)]"
|
||||
>
|
||||
<Users className="h-5 w-5 mr-2" />
|
||||
Join GameForge
|
||||
</Badge>
|
||||
<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" />
|
||||
Join Our Community
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Become a GameForge Member
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Join thousands of developers who are shipping games faster,
|
||||
building stronger products, and growing their audiences.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl lg:text-6xl">
|
||||
Become Part of the Community
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-green-100/90 sm:text-xl">
|
||||
Join thousands of game developers building together. Monthly
|
||||
shipping cycles, rapid iteration, and unstoppable momentum.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] transition hover:bg-green-300"
|
||||
{/* Meet the Team */}
|
||||
<section className="py-16 border-y 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">
|
||||
Meet the Team
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{TEAM_MEMBERS.map((member) => (
|
||||
<Card
|
||||
key={member.id}
|
||||
className="bg-green-950/20 border-green-400/30 overflow-hidden"
|
||||
>
|
||||
<Users className="mr-2 h-5 w-5" />
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-green-400/60 text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
View Requirements
|
||||
</Button>
|
||||
</div>
|
||||
<div className="h-40 bg-gradient-to-b from-green-500/20 to-transparent flex items-center justify-center">
|
||||
<div className="w-24 h-24 rounded-full bg-green-400/20 border border-green-400/40 flex items-center justify-center text-2xl font-bold text-green-300">
|
||||
{member.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-green-400">{member.role}</p>
|
||||
</div>
|
||||
<p className="text-sm text-green-200/70">{member.bio}</p>
|
||||
<div className="space-y-2">
|
||||
{member.expertise.map((skill, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="inline-block px-2 py-1 text-xs bg-green-500/10 border border-green-400/30 rounded text-green-300 mr-2"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Member Benefits */}
|
||||
<section className="border-y border-green-400/10 bg-black/80 py-16">
|
||||
{/* Success Stories */}
|
||||
<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">
|
||||
Member Benefits
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-12">
|
||||
Success Stories
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Zap className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Monthly Releases
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Release your game monthly with built-in distribution and
|
||||
community exposure.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{TESTIMONIALS.map((testimonial) => (
|
||||
<Card
|
||||
key={testimonial.id}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Quote className="h-5 w-5 text-green-400 flex-shrink-0" />
|
||||
</div>
|
||||
<p className="text-green-100 mb-4 italic">
|
||||
"{testimonial.quote}"
|
||||
</p>
|
||||
<div className="space-y-3 pt-4 border-t border-green-400/10">
|
||||
<div>
|
||||
<p className="font-semibold text-green-300">
|
||||
{testimonial.author}
|
||||
</p>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{testimonial.role} at {testimonial.company}
|
||||
</p>
|
||||
</div>
|
||||
<Badge className="bg-green-500/20 border border-green-400/40 text-green-300">
|
||||
{testimonial.result}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Target className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Growth Support
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Dedicated support to help your game grow and reach
|
||||
thousands of players.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Membership Benefits */}
|
||||
<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">
|
||||
Membership Benefits
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-12">
|
||||
{MEMBERSHIP_BENEFITS.map((benefit, idx) => (
|
||||
<div key={idx} className="flex gap-4 items-start">
|
||||
<CheckCircle className="h-6 w-6 text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<span className="text-green-100">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Heart className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Community Network
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Connect with fellow developers, share knowledge, and
|
||||
collaborate on projects.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Resources & Tools
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Access to templates, libraries, and development tools to
|
||||
accelerate your work.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* CTA */}
|
||||
<div className="text-center">
|
||||
<p className="text-lg text-green-100/80 mb-6">
|
||||
Ready to ship faster and build better games?
|
||||
</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 text-lg">
|
||||
Apply for Membership
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,89 @@ 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 { Gamepad2, BookOpen, Zap, Code } from "lucide-react";
|
||||
import { BookOpen, CheckCircle, Lock, ArrowRight, Zap } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface LearningPath {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
duration: string;
|
||||
lessons: number;
|
||||
difficulty: "Beginner" | "Intermediate" | "Advanced";
|
||||
completed: number;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
const LEARNING_PATHS: LearningPath[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Game Dev Fundamentals",
|
||||
description: "Master the core concepts of game development",
|
||||
duration: "4 weeks",
|
||||
lessons: 12,
|
||||
difficulty: "Beginner",
|
||||
completed: 0,
|
||||
icon: <BookOpen className="h-6 w-6" />,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Building Your First Game",
|
||||
description: "Create a complete 2D platformer from scratch",
|
||||
duration: "6 weeks",
|
||||
lessons: 18,
|
||||
difficulty: "Beginner",
|
||||
completed: 8,
|
||||
icon: <Zap className="h-6 w-6" />,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Advanced Game Physics",
|
||||
description: "Implement realistic physics and collision systems",
|
||||
duration: "5 weeks",
|
||||
lessons: 15,
|
||||
difficulty: "Advanced",
|
||||
completed: 0,
|
||||
icon: <ArrowRight className="h-6 w-6" />,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Multiplayer Game Architecture",
|
||||
description: "Build networked games with real-time synchronization",
|
||||
duration: "7 weeks",
|
||||
lessons: 20,
|
||||
difficulty: "Advanced",
|
||||
completed: 0,
|
||||
icon: <CheckCircle className="h-6 w-6" />,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Game Art & Animation",
|
||||
description: "Create stunning visuals and smooth animations",
|
||||
duration: "6 weeks",
|
||||
lessons: 16,
|
||||
difficulty: "Intermediate",
|
||||
completed: 0,
|
||||
icon: <BookOpen className="h-6 w-6" />,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Monetization & Publishing",
|
||||
description: "Launch your game and start earning revenue",
|
||||
duration: "3 weeks",
|
||||
lessons: 10,
|
||||
difficulty: "Intermediate",
|
||||
completed: 0,
|
||||
icon: <Zap className="h-6 w-6" />,
|
||||
},
|
||||
];
|
||||
|
||||
export default function GameForgeStartBuilding() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid 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" />
|
||||
|
|
@ -19,119 +92,172 @@ export default function GameForgeStartBuilding() {
|
|||
<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="relative overflow-hidden py-20 lg:py-28">
|
||||
<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">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
{/* Header */}
|
||||
<section className="relative 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
|
||||
variant="outline"
|
||||
className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)]"
|
||||
>
|
||||
<Gamepad2 className="h-5 w-5 mr-2" />
|
||||
Start Building
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl lg:text-6xl">
|
||||
Build Amazing Games
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-green-100/90 sm:text-xl">
|
||||
Everything you need to start creating. From tutorials to
|
||||
templates, we've got you covered.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] transition hover:bg-green-300"
|
||||
>
|
||||
<BookOpen className="mr-2 h-5 w-5" />
|
||||
View Tutorials
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-green-400/60 text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
Get Templates
|
||||
</Button>
|
||||
<div className="flex items-start justify-between gap-8">
|
||||
<div className="flex-1">
|
||||
<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">
|
||||
<BookOpen className="h-4 w-4 mr-2" />
|
||||
Learning Academy
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Master Game Development
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Structured learning paths designed to take you from beginner
|
||||
to expert. Learn at your own pace with hands-on projects.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Resources Grid */}
|
||||
<section className="border-y border-green-400/10 bg-black/80 py-16">
|
||||
{/* Learning Paths Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{LEARNING_PATHS.map((path) => (
|
||||
<Card
|
||||
key={path.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"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="text-green-400">{path.icon}</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
path.difficulty === "Beginner"
|
||||
? "border-green-400/40 bg-green-500/10 text-green-300"
|
||||
: path.difficulty === "Intermediate"
|
||||
? "border-yellow-400/40 bg-yellow-500/10 text-yellow-300"
|
||||
: "border-red-400/40 bg-red-500/10 text-red-300"
|
||||
}
|
||||
>
|
||||
{path.difficulty}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="text-green-300 text-xl">
|
||||
{path.title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-green-200/70">
|
||||
{path.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-6 text-sm text-green-300/80">
|
||||
<span>{path.lessons} lessons</span>
|
||||
<span>•</span>
|
||||
<span>{path.duration}</span>
|
||||
</div>
|
||||
|
||||
{path.completed > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-xs text-green-300">
|
||||
<span>Progress</span>
|
||||
<span>
|
||||
{path.completed}/{path.lessons}
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-green-950/40 rounded-full h-2">
|
||||
<div
|
||||
className="bg-green-400 h-2 rounded-full transition-all"
|
||||
style={{
|
||||
width: `${(path.completed / path.lessons) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className="w-full bg-green-400 text-black hover:bg-green-300 mt-4"
|
||||
onClick={() => navigate(`/gameforge/learning/${path.id}`)}
|
||||
>
|
||||
{path.completed > 0 ? "Continue Learning" : "Start Path"}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Project Section */}
|
||||
<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">
|
||||
Building Resources
|
||||
Build Projects
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Card className="bg-green-950/30 border-green-400/40">
|
||||
<CardHeader>
|
||||
<Code className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Documentation
|
||||
Code Along Sessions
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Comprehensive guides and API reference for all tools and
|
||||
frameworks.
|
||||
<p className="text-sm text-green-200/70 mb-4">
|
||||
Follow along with our experts as they build games from
|
||||
scratch. Interactive and hands-on.
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
View Sessions →
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<Card className="bg-green-950/30 border-green-400/40">
|
||||
<CardHeader>
|
||||
<Zap className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Quick Start
|
||||
Mini Challenges
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Get your first game up and running in minutes with our
|
||||
setup guides.
|
||||
<p className="text-sm text-green-200/70 mb-4">
|
||||
Test your skills with weekly challenges. Get feedback from
|
||||
the community and improve faster.
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
View Challenges →
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<Card className="bg-green-950/30 border-green-400/40">
|
||||
<CardHeader>
|
||||
<BookOpen className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Video Tutorials
|
||||
Templates Library
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Learn by watching. Hundreds of video tutorials for all
|
||||
skill levels.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Gamepad2 className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Game Templates
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Starting templates and boilerplates for various game
|
||||
genres and styles.
|
||||
<p className="text-sm text-green-200/70 mb-4">
|
||||
Clone fully functional game templates and modify them to
|
||||
learn how things work.
|
||||
</p>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
Browse Templates →
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,99 @@
|
|||
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 { Trophy, Star, Users, Gamepad2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Gamepad2, Filter, Star, Users, TrendingUp } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
interface Game {
|
||||
id: number;
|
||||
title: string;
|
||||
creator: string;
|
||||
genre: "Action" | "Puzzle" | "Adventure" | "RPG" | "Casual";
|
||||
image: string;
|
||||
plays: number;
|
||||
rating: number;
|
||||
releaseDate: string;
|
||||
}
|
||||
|
||||
const FEATURED_GAMES: Game[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Pixel Quest Adventure",
|
||||
creator: "Alex Dev Studios",
|
||||
genre: "Adventure",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Pixel+Quest",
|
||||
plays: 15400,
|
||||
rating: 4.8,
|
||||
releaseDate: "2024-01",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Logic Maze Pro",
|
||||
creator: "Puzzle Labs",
|
||||
genre: "Puzzle",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Logic+Maze",
|
||||
plays: 12300,
|
||||
rating: 4.6,
|
||||
releaseDate: "2024-01",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Battle Royale X",
|
||||
creator: "Epic Creators",
|
||||
genre: "Action",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Battle+Royale",
|
||||
plays: 28900,
|
||||
rating: 4.9,
|
||||
releaseDate: "2023-12",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Mystic Realms RPG",
|
||||
creator: "Story Crafters",
|
||||
genre: "RPG",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Mystic+Realms",
|
||||
plays: 9200,
|
||||
rating: 4.7,
|
||||
releaseDate: "2023-12",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Casual Match",
|
||||
creator: "Fun Games Co",
|
||||
genre: "Casual",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Casual+Match",
|
||||
plays: 45600,
|
||||
rating: 4.5,
|
||||
releaseDate: "2023-11",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Speedrun Challenge",
|
||||
creator: "Speed Demons",
|
||||
genre: "Action",
|
||||
image: "https://via.placeholder.com/300x200/22c55e/000000?text=Speedrun",
|
||||
plays: 18700,
|
||||
rating: 4.8,
|
||||
releaseDate: "2023-11",
|
||||
},
|
||||
];
|
||||
|
||||
const GENRES = ["All", "Action", "Puzzle", "Adventure", "RPG", "Casual"];
|
||||
const SORT_OPTIONS = ["Trending", "Most Played", "Highest Rated", "Newest"];
|
||||
|
||||
export default function GameForgeViewPortfolio() {
|
||||
const navigate = useNavigate();
|
||||
const [selectedGenre, setSelectedGenre] = useState("All");
|
||||
const [sortBy, setSortBy] = useState("Trending");
|
||||
|
||||
const filteredGames = FEATURED_GAMES.filter(
|
||||
(game) => selectedGenre === "All" || game.genre === selectedGenre
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid 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" />
|
||||
|
|
@ -19,124 +101,153 @@ export default function GameForgeViewPortfolio() {
|
|||
<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="relative overflow-hidden py-20 lg:py-28">
|
||||
<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">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
{/* Header */}
|
||||
<section className="relative 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>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)]"
|
||||
>
|
||||
<Trophy className="h-5 w-5 mr-2" />
|
||||
Portfolio Showcase
|
||||
<div className="mb-12">
|
||||
<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">
|
||||
<Gamepad2 className="h-4 w-4 mr-2" />
|
||||
Game Gallery
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl lg:text-6xl">
|
||||
Featured Games & Projects
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Discover Amazing Games
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-green-100/90 sm:text-xl">
|
||||
Explore the best games and projects built by our community.
|
||||
Get inspired and showcase your own work.
|
||||
<p className="text-lg text-green-100/80">
|
||||
Explore games built by our community using GameForge
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] transition hover:bg-green-300"
|
||||
{/* Filters & Sorting */}
|
||||
<div className="flex flex-col md:flex-row gap-6 items-stretch">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Filter className="h-4 w-4 text-green-400" />
|
||||
<span className="text-sm font-medium text-green-300">
|
||||
Genre
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{GENRES.map((genre) => (
|
||||
<Button
|
||||
key={genre}
|
||||
variant={
|
||||
selectedGenre === genre ? "default" : "outline"
|
||||
}
|
||||
size="sm"
|
||||
onClick={() => setSelectedGenre(genre)}
|
||||
className={
|
||||
selectedGenre === genre
|
||||
? "bg-green-400 text-black hover:bg-green-300"
|
||||
: "border-green-400/40 text-green-300 hover:bg-green-500/10"
|
||||
}
|
||||
>
|
||||
{genre}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:w-48">
|
||||
<label className="text-sm font-medium text-green-300 block mb-2">
|
||||
Sort by
|
||||
</label>
|
||||
<select
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-green-950/40 border border-green-400/30 rounded text-green-300 text-sm focus:outline-none focus:border-green-400/60"
|
||||
>
|
||||
<Gamepad2 className="mr-2 h-5 w-5" />
|
||||
Browse Gallery
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-green-400/60 text-green-300 hover:bg-green-500/10"
|
||||
>
|
||||
Submit Your Game
|
||||
</Button>
|
||||
{SORT_OPTIONS.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Projects */}
|
||||
<section className="border-y border-green-400/10 bg-black/80 py-16">
|
||||
{/* Games Grid */}
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8">
|
||||
Trending Projects
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Star className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Award Winners
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
The best games that have won accolades and community
|
||||
recognition.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{filteredGames.map((game) => (
|
||||
<div
|
||||
key={game.id}
|
||||
className="group bg-green-950/20 border border-green-400/30 rounded-lg overflow-hidden hover:border-green-400/60 transition-all hover:shadow-lg hover:shadow-green-500/20"
|
||||
>
|
||||
<div className="relative overflow-hidden h-48 bg-gradient-to-b from-green-500/20 to-transparent">
|
||||
<img
|
||||
src={game.image}
|
||||
alt={game.title}
|
||||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute top-3 right-3">
|
||||
<Badge className="bg-green-400/80 text-black">
|
||||
{game.genre}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Trophy className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Popular This Month
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Most played and loved games released this month by our
|
||||
creators.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="p-4 space-y-3">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300 mb-1">
|
||||
{game.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/60">
|
||||
by {game.creator}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Community Picks
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
Games voted for by our community as the absolute best
|
||||
experiences.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center justify-between text-xs text-green-300/70 pt-2 border-t border-green-400/10">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex items-center gap-1">
|
||||
<Gamepad2 className="h-3 w-3" />
|
||||
{(game.plays / 1000).toFixed(1)}K
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Star className="h-3 w-3 fill-green-400 text-green-400" />
|
||||
{game.rating}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Gamepad2 className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">
|
||||
Just Launched
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-green-200/70">
|
||||
The newest games just released by our talented game
|
||||
developers.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button
|
||||
className="w-full bg-green-400 text-black hover:bg-green-300"
|
||||
size="sm"
|
||||
>
|
||||
Play Now
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Submit 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">
|
||||
Built Something Amazing?
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Submit your game to our gallery and showcase your work to
|
||||
thousands of players.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
|
||||
Submit Your Game
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Reference in a new issue