From ebe2399a95c231be060552a429f176f1ab556082 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 7 Nov 2025 22:39:34 +0000 Subject: [PATCH] Redesign StartBuilding as interactive learning paths with step progression cgen-680a6e4bff2d4cd6af37aa7778e30aec --- .../gameforge/GameForgeJoinGameForge.tsx | 314 +++++++++++------ .../gameforge/GameForgeStartBuilding.tsx | 290 +++++++++++----- .../gameforge/GameForgeViewPortfolio.tsx | 317 ++++++++++++------ 3 files changed, 629 insertions(+), 292 deletions(-) diff --git a/client/pages/gameforge/GameForgeJoinGameForge.tsx b/client/pages/gameforge/GameForgeJoinGameForge.tsx index 2360c565..bab6b5dd 100644 --- a/client/pages/gameforge/GameForgeJoinGameForge.tsx +++ b/client/pages/gameforge/GameForgeJoinGameForge.tsx @@ -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 (
- {/* Animated grid background */}
@@ -19,121 +102,138 @@ export default function GameForgeJoinGameForge() {
- {/* Hero Section */} -
-
-
- + {/* Header */} +
+
+ - - - Join GameForge - + + + Join Our Community + +

+ Become a GameForge Member +

+

+ Join thousands of developers who are shipping games faster, + building stronger products, and growing their audiences. +

+
+
-

- Become Part of the Community -

- -

- Join thousands of game developers building together. Monthly - shipping cycles, rapid iteration, and unstoppable momentum. -

- -
- - -
+
+
+ {member.name + .split(" ") + .map((n) => n[0]) + .join("")} +
+
+ +
+

+ {member.name} +

+

{member.role}

+
+

{member.bio}

+
+ {member.expertise.map((skill, idx) => ( + + {skill} + + ))} +
+ + + ))}
- {/* Member Benefits */} -
+ {/* Success Stories */} +
-

- Member Benefits +

+ Success Stories

-
- - - - - Monthly Releases - - - -

- Release your game monthly with built-in distribution and - community exposure. -

- - +
+ {TESTIMONIALS.map((testimonial) => ( + + +
+ +
+

+ "{testimonial.quote}" +

+
+
+

+ {testimonial.author} +

+

+ {testimonial.role} at {testimonial.company} +

+
+ + {testimonial.result} + +
+ + + ))} +
+
+
- - - - - Growth Support - - - -

- Dedicated support to help your game grow and reach - thousands of players. -

- - + {/* Membership Benefits */} +
+
+

+ Membership Benefits +

+
+ {MEMBERSHIP_BENEFITS.map((benefit, idx) => ( +
+ + {benefit} +
+ ))} +
- - - - - Community Network - - - -

- Connect with fellow developers, share knowledge, and - collaborate on projects. -

- - - - - - - - Resources & Tools - - - -

- Access to templates, libraries, and development tools to - accelerate your work. -

- - + {/* CTA */} +
+

+ Ready to ship faster and build better games? +

+
diff --git a/client/pages/gameforge/GameForgeStartBuilding.tsx b/client/pages/gameforge/GameForgeStartBuilding.tsx index 382ff4f2..07edfd14 100644 --- a/client/pages/gameforge/GameForgeStartBuilding.tsx +++ b/client/pages/gameforge/GameForgeStartBuilding.tsx @@ -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: , + }, + { + 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: , + }, + { + id: 3, + title: "Advanced Game Physics", + description: "Implement realistic physics and collision systems", + duration: "5 weeks", + lessons: 15, + difficulty: "Advanced", + completed: 0, + icon: , + }, + { + id: 4, + title: "Multiplayer Game Architecture", + description: "Build networked games with real-time synchronization", + duration: "7 weeks", + lessons: 20, + difficulty: "Advanced", + completed: 0, + icon: , + }, + { + id: 5, + title: "Game Art & Animation", + description: "Create stunning visuals and smooth animations", + duration: "6 weeks", + lessons: 16, + difficulty: "Intermediate", + completed: 0, + icon: , + }, + { + id: 6, + title: "Monetization & Publishing", + description: "Launch your game and start earning revenue", + duration: "3 weeks", + lessons: 10, + difficulty: "Intermediate", + completed: 0, + icon: , + }, +]; + export default function GameForgeStartBuilding() { const navigate = useNavigate(); return (
- {/* Animated grid background */}
@@ -19,119 +92,172 @@ export default function GameForgeStartBuilding() {
- {/* Hero Section */} -
-
-
- + {/* Header */} +
+
+ - - - Start Building - - -

- Build Amazing Games -

- -

- Everything you need to start creating. From tutorials to - templates, we've got you covered. -

- -
- - +
+
+ + + Learning Academy + +

+ Master Game Development +

+

+ Structured learning paths designed to take you from beginner + to expert. Learn at your own pace with hands-on projects. +

- {/* Resources Grid */} -
+ {/* Learning Paths Grid */} +
+
+
+ {LEARNING_PATHS.map((path) => ( + + +
+
{path.icon}
+ + {path.difficulty} + +
+ + {path.title} + + + +

+ {path.description} +

+ +
+ {path.lessons} lessons + • + {path.duration} +
+ + {path.completed > 0 && ( +
+
+ Progress + + {path.completed}/{path.lessons} + +
+
+
+
+
+ )} + + + + + ))} +
+
+
+ + {/* Featured Project Section */} +

- Building Resources + Build Projects

-
- +
+ - - Documentation + Code Along Sessions -

- Comprehensive guides and API reference for all tools and - frameworks. +

+ Follow along with our experts as they build games from + scratch. Interactive and hands-on.

+ - + - - Quick Start + Mini Challenges -

- Get your first game up and running in minutes with our - setup guides. +

+ Test your skills with weekly challenges. Get feedback from + the community and improve faster.

+ - + - - Video Tutorials + Templates Library -

- Learn by watching. Hundreds of video tutorials for all - skill levels. -

- - - - - - - - Game Templates - - - -

- Starting templates and boilerplates for various game - genres and styles. +

+ Clone fully functional game templates and modify them to + learn how things work.

+
diff --git a/client/pages/gameforge/GameForgeViewPortfolio.tsx b/client/pages/gameforge/GameForgeViewPortfolio.tsx index a6e2fee8..be4b4e86 100644 --- a/client/pages/gameforge/GameForgeViewPortfolio.tsx +++ b/client/pages/gameforge/GameForgeViewPortfolio.tsx @@ -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 (
- {/* Animated grid background */}
@@ -19,124 +101,153 @@ export default function GameForgeViewPortfolio() {
- {/* Hero Section */} -
-
-
- + {/* Header */} +
+
+ - - - Portfolio Showcase +
+ + + Game Gallery - -

- Featured Games & Projects +

+ Discover Amazing Games

- -

- Explore the best games and projects built by our community. - Get inspired and showcase your own work. +

+ Explore games built by our community using GameForge

+
-
- + ))} +
+
+ +
+ +
- {/* Featured Projects */} -
+ {/* Games Grid */} +
-

- Trending Projects -

-
- - - - - Award Winners - - - -

- The best games that have won accolades and community - recognition. -

- - +
+ {filteredGames.map((game) => ( +
+
+ {game.title} +
+ + {game.genre} + +
+
- - - - - Popular This Month - - - -

- Most played and loved games released this month by our - creators. -

- - +
+
+

+ {game.title} +

+

+ by {game.creator} +

+
- - - - - Community Picks - - - -

- Games voted for by our community as the absolute best - experiences. -

- - +
+
+ + + {(game.plays / 1000).toFixed(1)}K + + + + {game.rating} + +
+
- - - - - Just Launched - - - -

- The newest games just released by our talented game - developers. -

- - + +
+
+ ))}
+ + {/* Submit CTA */} +
+
+

+ Built Something Amazing? +

+

+ Submit your game to our gallery and showcase your work to + thousands of players. +

+ +
+