Create GameForgePricing with tiered pricing and comparison table
cgen-95156aa0088543af8955cb32dfc7e2d5
This commit is contained in:
Builder.io
parent
ebe2399a95
commit
401bd1741d
3 changed files with 589 additions and 222 deletions
|
|
@ -2,104 +2,249 @@ 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 { Zap, Target, Users, Lightbulb } from "lucide-react";
|
||||
import { Heart, Rocket, Target, Globe } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function GameForgeAbout() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const milestones = [
|
||||
{
|
||||
year: 2020,
|
||||
title: "GameForge Founded",
|
||||
description:
|
||||
"Born from a frustration with fragmented game development tools, we set out to create something better.",
|
||||
},
|
||||
{
|
||||
year: 2021,
|
||||
title: "First 1000 Developers",
|
||||
description:
|
||||
"Reached our first major milestone with developers from 50+ countries using GameForge.",
|
||||
},
|
||||
{
|
||||
year: 2022,
|
||||
title: "Monthly Shipping Model",
|
||||
description:
|
||||
"Launched our signature monthly shipping cycles helping developers release faster.",
|
||||
},
|
||||
{
|
||||
year: 2023,
|
||||
title: "100+ Games Shipped",
|
||||
description:
|
||||
"Celebrated as our community shipped over 100 games through the platform.",
|
||||
},
|
||||
{
|
||||
year: 2024,
|
||||
title: "Global Expansion",
|
||||
description:
|
||||
"Expanded to support multiple languages and localization for worldwide developers.",
|
||||
},
|
||||
];
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: <Heart className="h-8 w-8 text-green-400" />,
|
||||
title: "Creator First",
|
||||
description:
|
||||
"Everything we build is designed with developers and creators in mind. Your success is our success.",
|
||||
},
|
||||
{
|
||||
icon: <Rocket className="h-8 w-8 text-green-400" />,
|
||||
title: "Speed & Momentum",
|
||||
description:
|
||||
"We believe in rapid iteration and shipping fast. Monthly cycles keep your games fresh and your players engaged.",
|
||||
},
|
||||
{
|
||||
icon: <Target className="h-8 w-8 text-green-400" />,
|
||||
title: "Quality Obsessed",
|
||||
description:
|
||||
"High standards across everything. From tools to community, we maintain excellence in every detail.",
|
||||
},
|
||||
{
|
||||
icon: <Globe className="h-8 w-8 text-green-400" />,
|
||||
title: "Open Community",
|
||||
description:
|
||||
"We believe in the power of community. Together, we build stronger games and support each other.",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<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" />
|
||||
<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="relative overflow-hidden py-12 lg:py-16">
|
||||
<section className="py-16 lg:py-20">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/game-development")}
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl mb-4">
|
||||
About GameForge
|
||||
<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">
|
||||
<Rocket className="h-4 w-4 mr-2" />
|
||||
Our Story
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Building the Future of Game Development
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Empowering developers to ship faster and better
|
||||
<p className="text-lg text-green-100/80 max-w-3xl">
|
||||
GameForge was born from a simple belief: game development should
|
||||
be fast, accessible, and community-driven. We're on a mission to
|
||||
empower creators worldwide to build amazing games.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<div className="rounded-lg border border-green-400/30 bg-green-950/20 p-8 mb-12">
|
||||
<h2 className="text-2xl font-bold text-green-300 mb-4">Our Mission</h2>
|
||||
<p className="text-green-200/80 text-lg leading-relaxed">
|
||||
GameForge is dedicated to accelerating game development by providing studios with the tools,
|
||||
practices, and infrastructure they need to maintain monthly shipping cycles. We believe that faster
|
||||
iteration leads to better games and happier teams.
|
||||
</p>
|
||||
</div>
|
||||
{/* Mission & Vision */}
|
||||
<section className="py-16 border-y border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Our Mission
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-4">
|
||||
To democratize game development by providing tools,
|
||||
resources, and community support that enable anyone to
|
||||
create and ship games at scale.
|
||||
</p>
|
||||
<p className="text-lg text-green-100/80">
|
||||
We believe that great games come from passionate creators.
|
||||
Our job is to remove barriers and accelerate their journey
|
||||
from idea to shipped product.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Values */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="bg-green-950/20 border-green-400/30">
|
||||
<CardHeader>
|
||||
<Zap className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">Speed</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/70">
|
||||
Fast iteration cycles that keep your team productive
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-green-950/20 border-green-400/30">
|
||||
<CardHeader>
|
||||
<Target className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">Reliability</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/70">
|
||||
Stable tools and practices you can depend on
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-green-950/20 border-green-400/30">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">Community</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/70">
|
||||
Support from developers and studios using GameForge
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="bg-green-950/20 border-green-400/30">
|
||||
<CardHeader>
|
||||
<Lightbulb className="h-8 w-8 text-green-400 mb-2" />
|
||||
<CardTitle className="text-green-300">Innovation</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/70">
|
||||
Continuous improvement driven by user feedback
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Our Vision
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-4">
|
||||
A world where game development is accessible, fast, and
|
||||
collaborative. Where indie developers have the same tools
|
||||
and support as major studios.
|
||||
</p>
|
||||
<p className="text-lg text-green-100/80">
|
||||
We're building a platform where monthly shipping cycles are
|
||||
the norm, where community support accelerates growth, and
|
||||
where every creator has the chance to succeed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Our Values */}
|
||||
<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 Core Values
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{values.map((value, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0">{value.icon}</div>
|
||||
<CardTitle className="text-green-300 text-xl">
|
||||
{value.title}
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-green-200/70">{value.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Timeline */}
|
||||
<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">
|
||||
Our Journey
|
||||
</h2>
|
||||
<div className="space-y-8">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<div key={idx} className="flex gap-6">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-4 h-4 rounded-full bg-green-400 border-4 border-black" />
|
||||
{idx < milestones.length - 1 && (
|
||||
<div className="w-1 h-24 bg-gradient-to-b from-green-400 to-transparent" />
|
||||
)}
|
||||
</div>
|
||||
<div className="pb-8">
|
||||
<Badge className="bg-green-500/20 border border-green-400/40 text-green-300 mb-2">
|
||||
{milestone.year}
|
||||
</Badge>
|
||||
<h3 className="text-xl font-bold text-green-300 mb-2">
|
||||
{milestone.title}
|
||||
</h3>
|
||||
<p className="text-green-200/70">
|
||||
{milestone.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Section */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{[
|
||||
{ value: "50K+", label: "Developers" },
|
||||
{ value: "150+", label: "Games Shipped" },
|
||||
{ value: "75+", label: "Countries" },
|
||||
{ value: "99.9%", label: "Uptime" },
|
||||
].map((stat, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-green-950/30 border-green-400/40 text-center"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-4xl font-black text-green-400 mb-2">
|
||||
{stat.value}
|
||||
</div>
|
||||
<p className="text-green-200/70">{stat.label}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bottom 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">
|
||||
Join the Movement
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Be part of something bigger. Join thousands of developers
|
||||
building the future of games.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
|
||||
Start Building Today
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -2,55 +2,80 @@ 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 { Check } from "lucide-react";
|
||||
import { Check, X, DollarSign, Zap } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const PRICING_TIERS = [
|
||||
interface PricingTier {
|
||||
id: number;
|
||||
name: string;
|
||||
price: string | number;
|
||||
period: string;
|
||||
description: string;
|
||||
cta: string;
|
||||
highlighted: boolean;
|
||||
features: {
|
||||
name: string;
|
||||
included: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
const PRICING_TIERS: PricingTier[] = [
|
||||
{
|
||||
name: "Studio Starter",
|
||||
description: "For small teams just starting out",
|
||||
price: "$99",
|
||||
period: "/month",
|
||||
features: [
|
||||
"Monthly shipping cycles",
|
||||
"Up to 5 team members",
|
||||
"Core tools and templates",
|
||||
"Community support",
|
||||
"Basic analytics",
|
||||
],
|
||||
id: 1,
|
||||
name: "Indie",
|
||||
price: "Free",
|
||||
period: "Forever",
|
||||
description: "Perfect for solo developers and small projects",
|
||||
cta: "Get Started",
|
||||
highlighted: false,
|
||||
features: [
|
||||
{ name: "Up to 2 published games", included: true },
|
||||
{ name: "Community support", included: true },
|
||||
{ name: "Basic game templates", included: true },
|
||||
{ name: "Monthly shipping", included: false },
|
||||
{ name: "Revenue sharing", included: false },
|
||||
{ name: "Priority support", included: false },
|
||||
{ name: "Premium assets library", included: false },
|
||||
{ name: "Dedicated manager", included: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Studio Pro",
|
||||
description: "For growing game studios",
|
||||
price: "$299",
|
||||
id: 2,
|
||||
name: "Studio",
|
||||
price: "$29",
|
||||
period: "/month",
|
||||
features: [
|
||||
"Everything in Starter",
|
||||
"Unlimited team members",
|
||||
"Advanced tools suite",
|
||||
"Priority support",
|
||||
"Custom integrations",
|
||||
"Performance monitoring",
|
||||
],
|
||||
description: "For small studios scaling their operations",
|
||||
cta: "Start Free Trial",
|
||||
highlighted: true,
|
||||
features: [
|
||||
{ name: "Up to 10 published games", included: true },
|
||||
{ name: "Community support", included: true },
|
||||
{ name: "Basic game templates", included: true },
|
||||
{ name: "Monthly shipping", included: true },
|
||||
{ name: "Revenue sharing (70/30)", included: true },
|
||||
{ name: "Priority support", included: true },
|
||||
{ name: "Premium assets library", included: true },
|
||||
{ name: "Dedicated manager", included: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Studio Enterprise",
|
||||
description: "For large-scale operations",
|
||||
id: 3,
|
||||
name: "Enterprise",
|
||||
price: "Custom",
|
||||
features: [
|
||||
"Everything in Pro",
|
||||
"Dedicated support team",
|
||||
"Custom development",
|
||||
"On-premise options",
|
||||
"SLA guarantees",
|
||||
"White-label solutions",
|
||||
],
|
||||
period: "Pricing",
|
||||
description: "For established studios with custom needs",
|
||||
cta: "Contact Sales",
|
||||
highlighted: false,
|
||||
features: [
|
||||
{ name: "Unlimited published games", included: true },
|
||||
{ name: "Community support", included: true },
|
||||
{ name: "Basic game templates", included: true },
|
||||
{ name: "Monthly shipping", included: true },
|
||||
{ name: "Revenue sharing (custom)", included: true },
|
||||
{ name: "Priority support", included: true },
|
||||
{ name: "Premium assets library", included: true },
|
||||
{ name: "Dedicated manager", included: true },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -60,86 +85,177 @@ export default function GameForgePricing() {
|
|||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<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" />
|
||||
<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="relative overflow-hidden py-12 lg:py-16">
|
||||
<section className="py-16 lg:py-20">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/game-development")}
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl mb-4">
|
||||
GameForge Pricing
|
||||
<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">
|
||||
<DollarSign className="h-4 w-4 mr-2" />
|
||||
Simple, Transparent Pricing
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
Choose Your Plan
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Flexible plans for studios of all sizes
|
||||
Get started free and scale as you grow. No hidden fees, no
|
||||
surprises.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{PRICING_TIERS.map((tier) => (
|
||||
<Card
|
||||
key={tier.name}
|
||||
className={`border transition-all ${
|
||||
key={tier.id}
|
||||
className={`relative border transition-all ${
|
||||
tier.highlighted
|
||||
? "bg-green-950/40 border-green-400 ring-2 ring-green-400/50"
|
||||
: "bg-green-950/20 border-green-400/30 hover:border-green-400/60"
|
||||
? "border-green-400/60 bg-green-950/30 shadow-lg shadow-green-500/20 scale-105"
|
||||
: "border-green-400/30 bg-green-950/20 hover:border-green-400/60"
|
||||
}`}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-green-300">{tier.name}</CardTitle>
|
||||
<p className="text-sm text-green-200/70 mt-2">{tier.description}</p>
|
||||
{tier.highlighted && (
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<Badge className="bg-green-400 text-black">
|
||||
Most Popular
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CardHeader className="pb-6">
|
||||
<CardTitle className="text-2xl text-green-300">
|
||||
{tier.name}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-green-200/70 mt-2">
|
||||
{tier.description}
|
||||
</p>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<div>
|
||||
<div className="text-3xl font-bold text-green-300">
|
||||
{/* Price */}
|
||||
<div className="py-6 border-y border-green-400/10">
|
||||
<div className="text-4xl font-black text-green-300">
|
||||
{tier.price}
|
||||
</div>
|
||||
{tier.period && (
|
||||
<p className="text-sm text-green-200/70">{tier.period}</p>
|
||||
)}
|
||||
<p className="text-sm text-green-200/60 mt-1">
|
||||
{tier.period}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{tier.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3">
|
||||
<Check className="h-5 w-5 text-green-400 flex-shrink-0 mt-0.5" />
|
||||
<span className="text-green-200/80">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<Button
|
||||
className={
|
||||
className={`w-full ${
|
||||
tier.highlighted
|
||||
? "w-full bg-green-400 text-black hover:bg-green-300"
|
||||
: "w-full border-green-400/60 text-green-300 hover:bg-green-500/10"
|
||||
}
|
||||
variant={tier.highlighted ? "default" : "outline"}
|
||||
? "bg-green-400 text-black hover:bg-green-300"
|
||||
: "border border-green-400/60 text-green-300 hover:bg-green-500/10"
|
||||
}`}
|
||||
>
|
||||
{tier.cta}
|
||||
</Button>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-3">
|
||||
{tier.features.map((feature, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-3 text-sm"
|
||||
>
|
||||
{feature.included ? (
|
||||
<Check className="h-5 w-5 text-green-400 flex-shrink-0" />
|
||||
) : (
|
||||
<X className="h-5 w-5 text-green-900 flex-shrink-0" />
|
||||
)}
|
||||
<span
|
||||
className={
|
||||
feature.included
|
||||
? "text-green-100"
|
||||
: "text-green-200/40"
|
||||
}
|
||||
>
|
||||
{feature.name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-16 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-4xl px-4">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-8 text-center">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{
|
||||
q: "Can I upgrade or downgrade anytime?",
|
||||
a: "Yes, you can change your plan at any time. Changes take effect immediately.",
|
||||
},
|
||||
{
|
||||
q: "Is there a setup or hidden fees?",
|
||||
a: "No hidden fees. Only pay for the plan you choose. Setup is completely free.",
|
||||
},
|
||||
{
|
||||
q: "What happens if I stop paying?",
|
||||
a: "Your games remain available to play, but you won't be able to publish new updates until you re-subscribe.",
|
||||
},
|
||||
{
|
||||
q: "Do you offer discounts for annual billing?",
|
||||
a: "Yes! Save 20% when you pay annually. Contact our sales team for more details.",
|
||||
},
|
||||
].map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-4 rounded border border-green-400/20 hover:border-green-400/40 transition-colors bg-green-950/10"
|
||||
>
|
||||
<h3 className="font-semibold text-green-300 mb-2">
|
||||
{item.q}
|
||||
</h3>
|
||||
<p className="text-green-200/70 text-sm">{item.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
Join thousands of developers building amazing games on
|
||||
GameForge.
|
||||
</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">
|
||||
<Zap className="mr-2 h-5 w-5" />
|
||||
Start Free Today
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,42 +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 { Users, Github, Mail, Linkedin } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Users, Linkedin, Github, Mail } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const TEAM_MEMBERS = [
|
||||
interface TeamMemberDetails {
|
||||
id: number;
|
||||
name: string;
|
||||
role: string;
|
||||
bio: string;
|
||||
expertise: string[];
|
||||
social: {
|
||||
linkedin?: string;
|
||||
github?: string;
|
||||
email: string;
|
||||
};
|
||||
joinedYear: number;
|
||||
}
|
||||
|
||||
const TEAM: TeamMemberDetails[] = [
|
||||
{
|
||||
name: "Alex Thompson",
|
||||
role: "Lead Engineer",
|
||||
bio: "Game architecture specialist with 10+ years experience",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Alex",
|
||||
skills: ["Architecture", "Systems Design", "Leadership"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
id: 1,
|
||||
name: "Alex Morgan",
|
||||
role: "Founder & CEO",
|
||||
bio: "Visionary leader with 20+ years in game technology. Built teams at major studios and led technical innovation.",
|
||||
expertise: ["Strategic Vision", "Game Architecture", "Team Building"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
github: "https://github.com",
|
||||
email: "alex@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2020,
|
||||
},
|
||||
{
|
||||
name: "Jordan Kim",
|
||||
role: "Tools Developer",
|
||||
bio: "Building next-generation development tools",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Jordan",
|
||||
skills: ["Tools", "Automation", "DevOps"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
id: 2,
|
||||
name: "Jordan Lee",
|
||||
role: "VP Engineering",
|
||||
bio: "Engineering leader focused on developer experience. Passionate about making tools that developers love.",
|
||||
expertise: ["Platform Architecture", "DevOps", "Developer Tools"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
github: "https://github.com",
|
||||
email: "jordan@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2021,
|
||||
},
|
||||
{
|
||||
name: "Sam Patel",
|
||||
role: "Game Designer",
|
||||
bio: "Crafting engaging gameplay experiences",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sam",
|
||||
skills: ["Design", "Game Mechanics", "UX"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
id: 3,
|
||||
name: "Casey Williams",
|
||||
role: "Head of Community",
|
||||
bio: "Community builder who believes in empowering creators. Led developer programs at top tech companies.",
|
||||
expertise: ["Community Strategy", "Events", "Developer Relations"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
email: "casey@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2021,
|
||||
},
|
||||
{
|
||||
name: "Morgan Lee",
|
||||
role: "QA Lead",
|
||||
bio: "Ensuring quality across all releases",
|
||||
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Morgan",
|
||||
skills: ["QA", "Testing", "Automation"],
|
||||
social: { github: "#", linkedin: "#", email: "#" },
|
||||
id: 4,
|
||||
name: "Taylor Chen",
|
||||
role: "Product Manager",
|
||||
bio: "Product strategist with a track record of shipping features developers actually want.",
|
||||
expertise: ["Product Strategy", "User Research", "Roadmapping"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
github: "https://github.com",
|
||||
email: "taylor@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2022,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Morgan Swift",
|
||||
role: "Head of Design",
|
||||
bio: "Design-focused leader creating beautiful, intuitive experiences for game developers.",
|
||||
expertise: ["UI/UX Design", "Design Systems", "User Experience"],
|
||||
social: {
|
||||
linkedin: "https://linkedin.com",
|
||||
email: "morgan@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2022,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Riley Davis",
|
||||
role: "Developer Relations",
|
||||
bio: "Passionate educator helping developers succeed. Active speaker at conferences and events.",
|
||||
expertise: ["Developer Education", "Technical Writing", "Speaking"],
|
||||
social: {
|
||||
github: "https://github.com",
|
||||
email: "riley@gameforge.dev",
|
||||
},
|
||||
joinedYear: 2023,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -46,96 +103,145 @@ export default function GameForgeTeams() {
|
|||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated backgrounds */}
|
||||
<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" />
|
||||
<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="relative overflow-hidden py-12 lg:py-16">
|
||||
<section className="py-16 lg:py-20">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<Button
|
||||
onClick={() => navigate("/game-development")}
|
||||
variant="ghost"
|
||||
className="text-green-300 hover:bg-green-500/10 mb-8"
|
||||
onClick={() => navigate("/gameforge")}
|
||||
>
|
||||
← Back to GameForge
|
||||
</Button>
|
||||
|
||||
<div className="mb-12">
|
||||
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 mb-4">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Our Team
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl mb-4">
|
||||
Meet the GameForge Team
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Passionate developers creating the future of game development
|
||||
</p>
|
||||
</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-4">
|
||||
<Users className="h-4 w-4 mr-2" />
|
||||
Our Team
|
||||
</Badge>
|
||||
<h1 className="text-4xl font-black text-green-300 mb-4 lg:text-5xl">
|
||||
The People Behind GameForge
|
||||
</h1>
|
||||
<p className="text-lg text-green-100/80 max-w-2xl">
|
||||
Meet the passionate team dedicated to helping you build amazing
|
||||
games.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Team Grid */}
|
||||
<section className="py-12 lg:py-16">
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
||||
{TEAM_MEMBERS.map((member) => (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{TEAM.map((member) => (
|
||||
<Card
|
||||
key={member.name}
|
||||
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 hover:bg-green-950/30 transition-all"
|
||||
key={member.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 overflow-hidden group"
|
||||
>
|
||||
<CardHeader className="text-center">
|
||||
<img
|
||||
src={member.avatar}
|
||||
alt={member.name}
|
||||
className="w-20 h-20 rounded-full mx-auto mb-4 border-2 border-green-400/50"
|
||||
/>
|
||||
<CardTitle className="text-green-300">{member.name}</CardTitle>
|
||||
<p className="text-sm text-green-200/70 mt-1">{member.role}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-green-200/70">{member.bio}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.skills.map((skill) => (
|
||||
<Badge
|
||||
key={skill}
|
||||
className="bg-green-500/20 text-green-300 border-0 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
{/* Avatar Area */}
|
||||
<div className="h-32 bg-gradient-to-b from-green-500/20 to-transparent flex items-center justify-center group-hover:from-green-500/30 transition-colors">
|
||||
<div className="w-20 h-20 rounded-full bg-green-400/20 border-2 border-green-400/40 flex items-center justify-center text-xl font-bold text-green-300">
|
||||
{member.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</div>
|
||||
<div className="flex gap-3 pt-2">
|
||||
<a href={member.social.github} className="text-green-400 hover:text-green-300">
|
||||
<Github className="h-5 w-5" />
|
||||
</a>
|
||||
<a href={member.social.linkedin} className="text-green-400 hover:text-green-300">
|
||||
<Linkedin className="h-5 w-5" />
|
||||
</a>
|
||||
<a href={member.social.email} className="text-green-400 hover:text-green-300">
|
||||
<Mail className="h-5 w-5" />
|
||||
</div>
|
||||
|
||||
<CardContent className="pt-6 space-y-4">
|
||||
{/* Name & Role */}
|
||||
<div>
|
||||
<h3 className="text-lg font-bold text-green-300">
|
||||
{member.name}
|
||||
</h3>
|
||||
<p className="text-sm text-green-400 font-medium">
|
||||
{member.role}
|
||||
</p>
|
||||
<p className="text-xs text-green-200/60 mt-1">
|
||||
Joined {member.joinedYear}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bio */}
|
||||
<p className="text-sm text-green-200/70">{member.bio}</p>
|
||||
|
||||
{/* Expertise Tags */}
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold text-green-400">
|
||||
Expertise
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{member.expertise.map((skill, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
variant="outline"
|
||||
className="bg-green-500/10 border-green-400/30 text-green-300 text-xs"
|
||||
>
|
||||
{skill}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex items-center gap-2 pt-4 border-t border-green-400/10">
|
||||
{member.social.linkedin && (
|
||||
<a
|
||||
href={member.social.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors"
|
||||
title="LinkedIn"
|
||||
>
|
||||
<Linkedin className="h-4 w-4" />
|
||||
</a>
|
||||
)}
|
||||
{member.social.github && (
|
||||
<a
|
||||
href={member.social.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors"
|
||||
title="GitHub"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
</a>
|
||||
)}
|
||||
<a
|
||||
href={`mailto:${member.social.email}`}
|
||||
className="p-2 rounded hover:bg-green-500/10 text-green-300 hover:text-green-200 transition-colors ml-auto"
|
||||
title="Email"
|
||||
>
|
||||
<Mail className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Hiring Section */}
|
||||
<div className="rounded-lg border border-green-400/30 bg-green-950/20 p-8 text-center">
|
||||
<h2 className="text-2xl font-bold text-green-300 mb-4">Join GameForge</h2>
|
||||
<p className="text-green-200/80 mb-6 max-w-2xl mx-auto">
|
||||
We're hiring talented developers to help shape the future of game development
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black hover:bg-green-300">
|
||||
View Open Positions
|
||||
</Button>
|
||||
</div>
|
||||
{/* Join Our Team CTA */}
|
||||
<section className="py-16 border-t border-green-400/10 bg-black/40">
|
||||
<div className="container mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 className="text-3xl font-bold text-green-300 mb-4">
|
||||
Want to Join Us?
|
||||
</h2>
|
||||
<p className="text-lg text-green-100/80 mb-8">
|
||||
We're building the future of game development. If you're
|
||||
passionate about empowering creators, we'd love to hear from
|
||||
you.
|
||||
</p>
|
||||
<Button className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300">
|
||||
View Open Positions
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue