Create proper GameForge join page

cgen-69772f358b5d4d83a1019e83dfec7cda

client/pages/gameforge/GameForgeJoinGameForge.tsx

@@ -2,42 +2,124 @@ 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, Zap, Heart, ArrowRight } from "lucide-react";
+import {
+  Users,
+  Zap,
+  Heart,
+  ArrowRight,
+  Rocket,
+  Gamepad2,
+  Trophy,
+  Code,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export default function GameForgeJoinGameForge() {
   const navigate = useNavigate();
 
-  const team = [
+  const joinPaths = [
     {
-      name: "Alex Turner",
+      icon: <Gamepad2 className="h-6 w-6" />,
-      role: "Game Director",
+      title: "Create a Studio",
-      expertise: ["Game Design", "Team Leadership", "Player Psychology"],
+      description:
+        "Start a new game studio and ship monthly games with full support from AeThex",
+      action: "Set Up Studio",
+      actionPath: "/teams",
     },
     {
-      name: "Sam Lee",
+      icon: <Code className="h-6 w-6" />,
-      role: "Lead Programmer",
+      title: "Join Existing Project",
-      expertise: ["Gameplay Systems", "Networking", "Performance"],
+      description:
+        "Contribute to active game projects and collaborate with talented developers",
+      action: "Browse Projects",
+      actionPath: "/projects",
     },
     {
-      name: "Jordan Davis",
+      icon: <Rocket className="h-6 w-6" />,
-      role: "Art Director",
+      title: "Apply as Developer",
-      expertise: ["Visual Design", "Animation", "Aesthetics"],
+      description:
+        "Join GameForge as a core team member and help ship games every month",
+      action: "View Positions",
+      actionPath: "/careers",
+    },
+  ];
+
+  const requirements = [
+    {
+      title: "Commitment",
+      items: [
+        "Ability to ship a complete game or feature monthly",
+        "Active participation in collaboration and planning",
+        "Willingness to learn and adapt quickly",
+      ],
     },
     {
-      name: "Casey Williams",
+      title: "Skills",
-      role: "Producer",
+      items: [
-      expertise: ["Project Management", "Shipping", "Strategy"],
+        "Game development experience (programming, design, art, etc.)",
+        "Understanding of game design principles",
+        "Ability to work in cross-functional teams",
+      ],
     },
     {
-      name: "Morgan Smith",
+      title: "Mindset",
-      role: "QA Lead",
+      items: [
-      expertise: ["Quality Assurance", "Testing", "Optimization"],
+        "Ship-focused mentality - done over perfect",
+        "Collaborative approach to problem-solving",
+        "Passion for game development and players",
+      ],
+    },
+  ];
+
+  const steps = [
+    {
+      number: "1",
+      title: "Explore",
+      description: "Browse current projects and studios on AeThex GameForge",
     },
     {
-      name: "Riley Chen",
+      number: "2",
-      role: "Sound Designer",
+      title: "Apply or Create",
-      expertise: ["Audio Design", "Music", "Polish"],
+      description:
+        "Apply to a project team or create your own studio with a founding team",
+    },
+    {
+      number: "3",
+      title: "Onboard",
+      description: "Get integrated into the community and start collaborating",
+    },
+    {
+      number: "4",
+      title: "Ship",
+      description:
+        "Work with your team to deliver your first game or update within a month",
+    },
+  ];
+
+  const benefits = [
+    {
+      icon: <Zap className="h-6 w-6" />,
+      title: "Monthly Shipping Cycles",
+      description:
+        "Release complete games or major updates every month. Fast feedback, real results.",
+    },
+    {
+      icon: <Heart className="h-6 w-6" />,
+      title: "Supportive Community",
+      description:
+        "Network with other game developers, studios, and industry professionals.",
+    },
+    {
+      icon: <Trophy className="h-6 w-6" />,
+      title: "Recognition & Rewards",
+      description:
+        "Get featured in GameForge showcase, earn achievements, and build your portfolio.",
+    },
+    {
+      icon: <Users className="h-6 w-6" />,
+      title: "Collaboration Tools",
+      description:
+        "Access to AeThex infrastructure, project management, and team coordination tools.",
     },
   ];
 
@@ -51,7 +133,8 @@ 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">
-          <section className="py-16">
+          {/* Hero Section */}
+          <section className="py-20 border-b border-green-400/10">
             <div className="container mx-auto max-w-6xl px-4">
               <Button
                 variant="ghost"
@@ -61,47 +144,94 @@ export default function GameForgeJoinGameForge() {
                 ← Back to GameForge
               </Button>
 
-              <h1 className="text-4xl lg:text-5xl font-black text-green-300 mb-4">
+              <div className="space-y-6">
-                The Team
+                <h1 className="text-5xl lg:text-6xl font-black text-green-300">
-              </h1>
+                  Join GameForge
-              <p className="text-lg text-green-100/80 max-w-3xl">
+                </h1>
-                The talented developers, designers, and producers who ship a
+                <p className="text-xl text-green-100/80 max-w-3xl">
-                game every month.
+                  Ship complete games every month. GameForge is where game
-              </p>
+                  studios and developers collaborate to create, iterate, and
+                  ship on a monthly cadence. Join existing projects, create
+                  your own studio, or contribute as a developer.
+                </p>
+
+                <div className="flex flex-wrap gap-3 pt-4">
+                  <Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
+                    Monthly Shipping
+                  </Badge>
+                  <Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
+                    Collaborative Teams
+                  </Badge>
+                  <Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
+                    Full Lifecycle Support
+                  </Badge>
+                </div>
+              </div>
             </div>
           </section>
 
-          <section className="py-16">
+          {/* Join Paths */}
+          <section className="py-20 border-b border-green-400/10">
             <div className="container mx-auto max-w-6xl px-4">
-              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              <h2 className="text-3xl font-bold text-green-300 mb-4">
-                {team.map((member, idx) => (
+                How to Join
+              </h2>
+              <p className="text-green-100/70 mb-12 max-w-2xl">
+                Whether you're a solo developer or leading a studio, there's a
+                path for you in GameForge.
+              </p>
+
+              <div className="grid md:grid-cols-3 gap-6">
+                {joinPaths.map((path, idx) => (
+                  <Card
+                    key={idx}
+                    className="bg-green-950/20 border-green-400/30 hover:border-green-400/50 transition-colors"
+                  >
+                    <CardContent className="pt-6">
+                      <div className="text-green-400 mb-4">{path.icon}</div>
+                      <h3 className="text-lg font-bold text-green-300 mb-2">
+                        {path.title}
+                      </h3>
+                      <p className="text-sm text-green-200/70 mb-6">
+                        {path.description}
+                      </p>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="border-green-400/40 text-green-300 hover:bg-green-500/10 w-full"
+                        onClick={() => navigate(path.actionPath)}
+                      >
+                        {path.action}
+                        <ArrowRight className="ml-2 h-4 w-4" />
+                      </Button>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Benefits */}
+          <section className="py-20 border-b border-green-400/10">
+            <div className="container mx-auto max-w-6xl px-4">
+              <h2 className="text-3xl font-bold text-green-300 mb-12">
+                Benefits of Joining GameForge
+              </h2>
+
+              <div className="grid md:grid-cols-2 gap-6">
+                {benefits.map((benefit, idx) => (
                   <Card
                     key={idx}
                     className="bg-green-950/20 border-green-400/30"
                   >
                     <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">
+                      <div className="text-green-400 mb-4">{benefit.icon}</div>
-                        {member.name
+                      <h3 className="font-bold text-green-300 mb-2">
-                          .split(" ")
+                        {benefit.title}
-                          .map((n) => n[0])
-                          .join("")}
-                      </div>
-                      <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">
+                      <p className="text-sm text-green-200/70">
-                        {member.role}
+                        {benefit.description}
                       </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"
-                          >
-                            {exp}
-                          </Badge>
-                        ))}
-                      </div>
                     </CardContent>
                   </Card>
                 ))}
@@ -109,45 +239,36 @@ export default function GameForgeJoinGameForge() {
             </div>
           </section>
 
-          <section className="py-16 border-t border-green-400/10 bg-black/40">
+          {/* Requirements */}
+          <section className="py-20 border-b 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">
+              <h2 className="text-3xl font-bold text-green-300 mb-12">
-                GameForge Culture
+                What We're Looking For
               </h2>
+
               <div className="grid md:grid-cols-3 gap-6">
-                {[
+                {requirements.map((req, idx) => (
-                  {
-                    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={idx}
                     className="bg-green-950/20 border-green-400/30"
                   >
-                    <CardContent className="pt-6 text-center">
+                    <CardContent className="pt-6">
-                      <div className="text-green-400 mb-3 flex justify-center">
+                      <h3 className="font-bold text-green-300 mb-4">
-                        {item.icon}
+                        {req.title}
-                      </div>
-                      <h3 className="font-bold text-green-300 mb-2">
-                        {item.title}
                       </h3>
-                      <p className="text-sm text-green-200/70">
+                      <ul className="space-y-2">
-                        {item.description}
+                        {req.items.map((item, i) => (
-                      </p>
+                          <li
+                            key={i}
+                            className="text-sm text-green-200/70 flex gap-2"
+                          >
+                            <span className="text-green-400 flex-shrink-0">
+                              ✓
+                            </span>
+                            <span>{item}</span>
+                          </li>
+                        ))}
+                      </ul>
                     </CardContent>
                   </Card>
                 ))}
@@ -155,21 +276,73 @@ export default function GameForgeJoinGameForge() {
             </div>
           </section>
 
-          <section className="py-16 border-t border-green-400/10">
+          {/* Process */}
+          <section className="py-20 border-b border-green-400/10">
+            <div className="container mx-auto max-w-6xl px-4">
+              <h2 className="text-3xl font-bold text-green-300 mb-12">
+                Getting Started
+              </h2>
+
+              <div className="space-y-6">
+                {steps.map((step, idx) => (
+                  <div key={idx} className="flex gap-6">
+                    <div className="flex-shrink-0">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-500 text-black font-bold">
+                        {step.number}
+                      </div>
+                    </div>
+                    <div className="flex-1 pt-1">
+                      <h3 className="font-bold text-green-300 mb-2">
+                        {step.title}
+                      </h3>
+                      <p className="text-green-200/70">{step.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <div className="mt-12 p-6 rounded-lg border border-green-400/30 bg-green-950/20">
+                <h3 className="font-bold text-green-300 mb-2">
+                  First Month Timeline
+                </h3>
+                <p className="text-sm text-green-200/70">
+                  Week 1: Onboarding & team setup. Week 2-3: Development &
+                  collaboration. Week 4: Polish & ship your first game or
+                  update.
+                </p>
+              </div>
+            </div>
+          </section>
+
+          {/* CTA Section */}
+          <section className="py-20">
             <div className="container mx-auto max-w-4xl px-4 text-center">
-              <h2 className="text-3xl font-bold text-green-300 mb-4">
+              <h2 className="text-4xl font-bold text-green-300 mb-4">
-                Join the Team
+                Ready to Ship?
               </h2>
               <p className="text-lg text-green-100/80 mb-8">
-                Interested in shipping games with us?
+                Join GameForge and start building with a community of
+                passionate game developers.
               </p>
-              <Button
+
-                className="bg-green-400 text-black hover:bg-green-300"
+              <div className="flex flex-wrap justify-center gap-4">
-                onClick={() => navigate("/careers")}
+                <Button
-              >
+                  className="bg-green-400 text-black hover:bg-green-300"
-                View Positions
+                  size="lg"
-                <ArrowRight className="ml-2 h-4 w-4" />
+                  onClick={() => navigate("/projects")}
-              </Button>
+                >
+                  Browse Projects
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="border-green-400/40 text-green-300 hover:bg-green-500/10"
+                  onClick={() => navigate("/teams")}
+                >
+                  Create or Join a Team
+                </Button>
+              </div>
             </div>
           </section>
         </main>