From 2661b3e652f42abd9c540f531201998c7922de43 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 7 Nov 2025 23:37:08 +0000
Subject: [PATCH] Rewrite GameForgeStartBuilding - Production pipeline instead
 of tutorials

cgen-142faffe212f4b08b19bd32c5bb61a00
---
 .../gameforge/GameForgeStartBuilding.tsx      | 470 ++++++++++--------
 1 file changed, 263 insertions(+), 207 deletions(-)

diff --git a/client/pages/gameforge/GameForgeStartBuilding.tsx b/client/pages/gameforge/GameForgeStartBuilding.tsx
index 07edfd14..28e5b3d2 100644
--- a/client/pages/gameforge/GameForgeStartBuilding.tsx
+++ b/client/pages/gameforge/GameForgeStartBuilding.tsx
@@ -2,89 +2,104 @@ 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 { BookOpen, CheckCircle, Lock, ArrowRight, Zap } from "lucide-react";
+import {
+  CheckCircle,
+  Clock,
+  Users,
+  Zap,
+  Calendar,
+  ArrowRight,
+} 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();
 
+  const currentProjects = [
+    {
+      title: "Pixel Quest: Reckoning",
+      phase: "Shipping",
+      progress: 95,
+      team: "Green Squadron (8 devs)",
+      daysLeft: 3,
+      features: "New combat, 50 levels, multiplayer beta",
+    },
+    {
+      title: "Logic Master Pro",
+      phase: "Alpha Testing",
+      progress: 65,
+      team: "Logic Lab (5 devs)",
+      daysLeft: 14,
+      features: "Daily challenges, leaderboards, cross-platform",
+    },
+    {
+      title: "Mystic Realms: Awakening",
+      phase: "Development",
+      progress: 40,
+      team: "Adventure Wing (10 devs)",
+      daysLeft: 22,
+      features: "Story driven, 100+ hours, procedural dungeons",
+    },
+  ];
+
+  const monthlyReleaseSchedule = [
+    {
+      month: "January",
+      releaseDate: "Jan 31, 2025",
+      game: "Pixel Quest: Reckoning",
+      status: "On Track",
+    },
+    {
+      month: "February",
+      releaseDate: "Feb 28, 2025",
+      game: "Logic Master Pro",
+      status: "On Track",
+    },
+    {
+      month: "March",
+      releaseDate: "Mar 31, 2025",
+      game: "Mystic Realms: Awakening",
+      status: "Planned",
+    },
+  ];
+
+  const productionPhases = [
+    {
+      phase: "Ideation",
+      duration: "1 week",
+      description: "Brainstorm and validate core concept",
+      team: "Design + Leads",
+    },
+    {
+      phase: "Prototyping",
+      duration: "1 week",
+      description: "Build playable proof of concept",
+      team: "Tech Lead + 2 Devs",
+    },
+    {
+      phase: "Development",
+      duration: "3 weeks",
+      description: "Full production with parallel teams",
+      team: "Full Team",
+    },
+    {
+      phase: "Polish & QA",
+      duration: "1 week",
+      description: "Bug fixes, optimization, player testing",
+      team: "QA Team + Leads",
+    },
+    {
+      phase: "Launch",
+      duration: "1 day",
+      description: "Ship to production, monitor metrics",
+      team: "DevOps + Product",
+    },
+  ];
+
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white overflow-hidden">
+        {/* 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" />
@@ -93,7 +108,7 @@ export default function GameForgeStartBuilding() {
 
         <main className="relative z-10">
           {/* Header */}
-          <section className="relative py-16 lg:py-20">
+          <section className="py-16">
             <div className="container mx-auto max-w-6xl px-4">
               <Button
                 variant="ghost"
@@ -103,90 +118,90 @@ export default function GameForgeStartBuilding() {
                 ← Back to GameForge
               </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>
+              <h1 className="text-4xl lg:text-5xl font-black text-green-300 mb-4">
+                Production Pipeline
+              </h1>
+              <p className="text-lg text-green-100/80 max-w-3xl">
+                How we ship a game every month. Our proven process, team coordination, and development tools that make monthly shipping possible.
+              </p>
             </div>
           </section>
 
-          {/* Learning Paths Grid */}
+          {/* Current Projects */}
           <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) => (
+              <h2 className="text-3xl font-bold text-green-300 mb-8">
+                Current Projects in Development
+              </h2>
+              <div className="space-y-6">
+                {currentProjects.map((project, idx) => (
                   <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"
+                    key={idx}
+                    className="bg-green-950/20 border-green-400/30"
                   >
-                    <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>
+                    <CardContent className="pt-6">
+                      <div className="space-y-4">
+                        <div className="flex items-start justify-between">
+                          <div>
+                            <h3 className="text-xl font-bold text-green-300 mb-2">
+                              {project.title}
+                            </h3>
+                            <p className="text-sm text-green-200/70">
+                              {project.team}
+                            </p>
+                          </div>
+                          <Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
+                            {project.phase}
+                          </Badge>
+                        </div>
 
-                      <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}
+                        {/* Progress Bar */}
+                        <div>
+                          <div className="flex justify-between mb-2">
+                            <span className="text-xs font-semibold text-green-400">
+                              Progress
+                            </span>
+                            <span className="text-xs text-green-200/70">
+                              {project.progress}%
                             </span>
                           </div>
-                          <div className="w-full bg-green-950/40 rounded-full h-2">
+                          <div className="w-full bg-green-950/40 rounded-full h-3">
                             <div
-                              className="bg-green-400 h-2 rounded-full transition-all"
-                              style={{
-                                width: `${(path.completed / path.lessons) * 100}%`,
-                              }}
+                              className="bg-green-400 h-3 rounded-full transition-all"
+                              style={{ width: `${project.progress}%` }}
                             />
                           </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>
+                        {/* Meta */}
+                        <div className="grid md:grid-cols-3 gap-4 pt-4 border-t border-green-400/10">
+                          <div>
+                            <p className="text-xs text-green-400 font-semibold mb-1">
+                              Days to Ship
+                            </p>
+                            <p className="text-lg font-bold text-green-300">
+                              {project.daysLeft}
+                            </p>
+                          </div>
+                          <div>
+                            <p className="text-xs text-green-400 font-semibold mb-1">
+                              Key Features
+                            </p>
+                            <p className="text-sm text-green-200/70">
+                              {project.features}
+                            </p>
+                          </div>
+                          <div className="text-right">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="text-green-300 hover:bg-green-500/10"
+                            >
+                              View Details →
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
                     </CardContent>
                   </Card>
                 ))}
@@ -194,72 +209,113 @@ export default function GameForgeStartBuilding() {
             </div>
           </section>
 
-          {/* Featured Project Section */}
+          {/* Release Schedule */}
+          <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-8">
+                Monthly Release Schedule
+              </h2>
+              <div className="space-y-3">
+                {monthlyReleaseSchedule.map((item, idx) => (
+                  <Card
+                    key={idx}
+                    className="bg-green-950/20 border-green-400/30"
+                  >
+                    <CardContent className="pt-6">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-4">
+                          <Calendar className="h-5 w-5 text-green-400" />
+                          <div>
+                            <p className="font-semibold text-green-300">
+                              {item.month} - {item.game}
+                            </p>
+                            <p className="text-sm text-green-200/70">
+                              Shipping {item.releaseDate}
+                            </p>
+                          </div>
+                        </div>
+                        <Badge className={`${
+                          item.status === "On Track"
+                            ? "bg-green-500/20 text-green-300 border border-green-400/40"
+                            : "bg-purple-500/20 text-purple-300 border border-purple-400/40"
+                        }`}>
+                          {item.status}
+                        </Badge>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Production Phases */}
+          <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">
+                Our 5-Week Process
+              </h2>
+              <div className="space-y-4">
+                {productionPhases.map((item, idx) => (
+                  <Card key={idx} className="bg-green-950/20 border-green-400/30">
+                    <CardContent className="pt-6">
+                      <div className="flex items-start gap-6">
+                        <div className="h-12 w-12 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center text-white font-bold flex-shrink-0">
+                          {idx + 1}
+                        </div>
+                        <div className="flex-1">
+                          <h3 className="font-bold text-green-300 mb-2">
+                            {item.phase}
+                          </h3>
+                          <p className="text-sm text-green-200/70 mb-2">
+                            {item.description}
+                          </p>
+                          <div className="flex flex-wrap gap-4">
+                            <Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
+                              <Clock className="h-3 w-3 mr-1" />
+                              {item.duration}
+                            </Badge>
+                            <Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
+                              <Users className="h-3 w-3 mr-1" />
+                              {item.team}
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Key Metrics */}
           <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">
-                Build Projects
+                Production Metrics
               </h2>
-              <div className="grid md:grid-cols-3 gap-6">
-                <Card className="bg-green-950/30 border-green-400/40">
-                  <CardHeader>
-                    <CardTitle className="text-green-300">
-                      Code Along Sessions
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <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/30 border-green-400/40">
-                  <CardHeader>
-                    <CardTitle className="text-green-300">
-                      Mini Challenges
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <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/30 border-green-400/40">
-                  <CardHeader>
-                    <CardTitle className="text-green-300">
-                      Templates Library
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <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 className="grid md:grid-cols-4 gap-6">
+                {[
+                  { label: "Monthly Cycle", value: "32 days" },
+                  { label: "Avg Team Size", value: "8 devs" },
+                  { label: "Lines of Code", value: "50K+" },
+                  { label: "Success Rate", value: "100%" },
+                ].map((metric, idx) => (
+                  <Card
+                    key={idx}
+                    className="bg-green-950/30 border-green-400/40 text-center"
+                  >
+                    <CardContent className="pt-6">
+                      <p className="text-3xl font-black text-green-400 mb-2">
+                        {metric.value}
+                      </p>
+                      <p className="text-sm text-green-200/70">
+                        {metric.label}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
               </div>
             </div>
           </section>