Build GameForgeJoinGameForge - Team showcase and culture
cgen-f333dc36c2dd4d149dff0f1ef75be018
This commit is contained in:
Builder.io
parent
9a76f9561b
commit
99a0adaca8
1 changed files with 104 additions and 175 deletions
|
|
@ -2,96 +2,45 @@ import Layout from "@/components/Layout";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Users, CheckCircle, Quote } from "lucide-react";
|
||||
import { Users, Zap, Heart, ArrowRight } 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();
|
||||
|
||||
const team = [
|
||||
{
|
||||
name: "Alex Turner",
|
||||
role: "Game Director",
|
||||
expertise: ["Game Design", "Team Leadership", "Player Psychology"],
|
||||
},
|
||||
{
|
||||
name: "Sam Lee",
|
||||
role: "Lead Programmer",
|
||||
expertise: ["Gameplay Systems", "Networking", "Performance"],
|
||||
},
|
||||
{
|
||||
name: "Jordan Davis",
|
||||
role: "Art Director",
|
||||
expertise: ["Visual Design", "Animation", "Aesthetics"],
|
||||
},
|
||||
{
|
||||
name: "Casey Williams",
|
||||
role: "Producer",
|
||||
expertise: ["Project Management", "Shipping", "Strategy"],
|
||||
},
|
||||
{
|
||||
name: "Morgan Smith",
|
||||
role: "QA Lead",
|
||||
expertise: ["Quality Assurance", "Testing", "Optimization"],
|
||||
},
|
||||
{
|
||||
name: "Riley Chen",
|
||||
role: "Sound Designer",
|
||||
expertise: ["Audio Design", "Music", "Polish"],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
|
|
@ -102,8 +51,7 @@ 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">
|
||||
{/* Header */}
|
||||
<section className="py-16 lg:py-20">
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -113,56 +61,41 @@ export default function GameForgeJoinGameForge() {
|
|||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-4">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Join Our Community
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Become a GameForge Member
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-green-300 mb-4">
|
||||
The Team
|
||||
</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 className="text-lg text-green-100/80 max-w-3xl">
|
||||
The talented developers, designers, and producers who ship a game every month.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Meet the Team */}
|
||||
<section className="py-16 border-y border-green-400/10 bg-black/40">
|
||||
<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">
|
||||
Meet the Team
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{TEAM_MEMBERS.map((member) => (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{team.map((member, idx) => (
|
||||
<Card
|
||||
key={member.id}
|
||||
className="bg-green-950/20 border-green-400/30 overflow-hidden"
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30"
|
||||
>
|
||||
<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("")}
|
||||
<CardContent className="pt-6">
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center text-white font-bold mb-3">
|
||||
{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"
|
||||
<h3 className="text-lg font-bold text-green-300 mb-1">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-green-400 font-medium mb-4">
|
||||
{member.role}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.expertise.map((exp, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
{exp}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
@ -172,38 +105,43 @@ export default function GameForgeJoinGameForge() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Success Stories */}
|
||||
<section className="py-16">
|
||||
<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">
|
||||
Success Stories
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8">
|
||||
GameForge Culture
|
||||
</h2>
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
{TESTIMONIALS.map((testimonial) => (
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: <Zap className="h-6 w-6" />,
|
||||
title: "Ship Every Month",
|
||||
description: "We deliver a complete, polished game every month",
|
||||
},
|
||||
{
|
||||
icon: <Heart className="h-6 w-6" />,
|
||||
title: "Love What You Make",
|
||||
description: "We care about quality and player experience",
|
||||
},
|
||||
{
|
||||
icon: <Users className="h-6 w-6" />,
|
||||
title: "Together",
|
||||
description: "Cross-functional teams working toward one goal",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<Card
|
||||
key={testimonial.id}
|
||||
key={idx}
|
||||
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" />
|
||||
<CardContent className="pt-6 text-center">
|
||||
<div className="text-green-400 mb-3 flex justify-center">
|
||||
{item.icon}
|
||||
</div>
|
||||
<p className="text-green-100 mb-4 italic">
|
||||
"{testimonial.quote}"
|
||||
<h3 className="font-bold text-green-300 mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-green-200/70">
|
||||
{item.description}
|
||||
</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>
|
||||
))}
|
||||
|
|
@ -211,30 +149,21 @@ export default function GameForgeJoinGameForge() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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
|
||||
<section className="py-16 border-t border-green-400/10">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Join the Team
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Interested in shipping games with us?
|
||||
</p>
|
||||
<Button
|
||||
className="bg-green-400 text-black hover:bg-green-300"
|
||||
onClick={() => navigate("/careers")}
|
||||
>
|
||||
View Positions
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue