From 184d8633d7afafdfa6df22117055719543944f1b Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 7 Nov 2025 23:47:58 +0000
Subject: [PATCH] Create FoundationContribute.tsx

cgen-dc48ffb85fe84e678e0e659d6837af75
---
 .../pages/foundation/FoundationContribute.tsx | 336 ++++++++++++------
 1 file changed, 226 insertions(+), 110 deletions(-)

diff --git a/client/pages/foundation/FoundationContribute.tsx b/client/pages/foundation/FoundationContribute.tsx
index 199c261a..c5f725a7 100644
--- a/client/pages/foundation/FoundationContribute.tsx
+++ b/client/pages/foundation/FoundationContribute.tsx
@@ -2,65 +2,137 @@ 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 { Github, BookOpen, Users, CheckCircle, ArrowRight } from "lucide-react";
+import {
+  Code,
+  GitBranch,
+  Users,
+  Star,
+  ArrowRight,
+  CheckCircle,
+  Lightbulb,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export default function FoundationContribute() {
   const navigate = useNavigate();
 
-  const projects = [
+  const contributionWays = [
     {
-      name: "AeThex Game Engine",
-      description: "High-performance game engine for web and native platforms",
-      stars: "2.5K",
-      language: "Rust",
-      difficulty: "Intermediate",
-      goodFirst: ["docs", "examples", "tests"],
+      icon: Code,
+      title: "Code Contributions",
+      description: "Help develop and improve our open-source projects",
+      ways: [
+        "Submit pull requests",
+        "Fix bugs and issues",
+        "Add new features",
+        "Improve documentation",
+      ],
     },
     {
-      name: "Roblox Toolkit",
-      description: "Professional Roblox development library and utilities",
-      stars: "1.8K",
-      language: "Lua",
-      difficulty: "Beginner",
-      goodFirst: ["bug fixes", "documentation", "examples"],
+      icon: Lightbulb,
+      title: "Ideas & Feedback",
+      description: "Share your ideas for new features and improvements",
+      ways: [
+        "Report issues",
+        "Suggest features",
+        "Provide user feedback",
+        "Review pull requests",
+      ],
     },
     {
-      name: "Procedural Generation Library",
-      description: "Advanced PCG algorithms for game content",
-      stars: "980",
-      language: "Rust",
-      difficulty: "Advanced",
-      goodFirst: ["tests", "optimization", "examples"],
+      icon: Users,
+      title: "Community Support",
+      description: "Help other developers in our community",
+      ways: [
+        "Answer questions",
+        "Help on Discord",
+        "Mentor newcomers",
+        "Share knowledge",
+      ],
+    },
+    {
+      icon: Star,
+      title: "Sponsorship",
+      description: "Support our mission financially",
+      ways: [
+        "GitHub sponsorship",
+        "Monthly donations",
+        "Corporate support",
+        "In-kind support",
+      ],
     },
   ];
 
-  const contributionTypes = [
+  const projects = [
     {
-      title: "Code Contributions",
-      description: "Submit bug fixes, features, or optimizations",
-      benefits: ["Build portfolio", "Earn recognition", "Shape projects"],
+      name: "AeThex Game Engine",
+      description:
+        "Lightweight, performant game engine optimized for web and native platforms",
+      stars: "2.5K",
+      language: "Rust",
+      issues: "12 open",
+      difficulty: "Intermediate",
     },
     {
-      title: "Documentation",
-      description: "Improve guides, README files, and API docs",
-      benefits: ["Help community", "Easy to start", "High impact"],
+      name: "Roblox Toolkit",
+      description:
+        "Comprehensive library for building professional Roblox experiences",
+      stars: "1.8K",
+      language: "Lua",
+      issues: "8 open",
+      difficulty: "Beginner",
     },
     {
-      title: "Bug Reports",
-      description: "Find and report issues with clear details",
-      benefits: ["Free to start", "No coding needed", "Helps everyone"],
+      name: "Developer CLI",
+      description: "Command-line tools for streamlined game development workflow",
+      stars: "1.2K",
+      language: "Go",
+      issues: "15 open",
+      difficulty: "Intermediate",
     },
     {
-      title: "Translations",
-      description: "Help translate docs and guides to other languages",
-      benefits: ["Global impact", "Flexible work", "Community valued"],
+      name: "Multiplayer Framework",
+      description:
+        "Drop-in networking layer for real-time multiplayer games",
+      stars: "980",
+      language: "TypeScript",
+      issues: "10 open",
+      difficulty: "Advanced",
+    },
+  ];
+
+  const steps = [
+    {
+      step: "1",
+      title: "Fork the Repository",
+      description: "Start by forking the project on GitHub",
+    },
+    {
+      step: "2",
+      title: "Create a Branch",
+      description: "Create a feature branch for your changes",
+    },
+    {
+      step: "3",
+      title: "Make Changes",
+      description: "Implement your improvements or fixes",
+    },
+    {
+      step: "4",
+      title: "Submit Pull Request",
+      description: "Submit your PR with a clear description",
+    },
+    {
+      step: "5",
+      title: "Review & Merge",
+      description: "Community reviews and merges your contribution",
     },
   ];
 
   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,#ef4444_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(239,68,68,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(239,68,68,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(239,68,68,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
@@ -68,6 +140,7 @@ export default function FoundationContribute() {
         <div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-red-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
 
         <main className="relative z-10">
+          {/* Header */}
           <section className="py-16">
             <div className="container mx-auto max-w-6xl px-4">
               <Button
@@ -79,67 +152,143 @@ export default function FoundationContribute() {
               </Button>
 
               <h1 className="text-4xl lg:text-5xl font-black text-red-300 mb-4">
-                Contribute to Open Source
+                Ways to Contribute
               </h1>
               <p className="text-lg text-red-100/80 max-w-3xl">
-                Help us build better tools and resources for the developer community. All skill levels welcome.
+                Join our community and help us build amazing open-source projects. There are many ways to contribute, regardless of your skill level.
               </p>
             </div>
           </section>
 
+          {/* Contribution Ways */}
           <section className="py-16">
             <div className="container mx-auto max-w-6xl px-4">
               <h2 className="text-3xl font-bold text-red-300 mb-8">
-                Featured Projects
+                Get Involved
               </h2>
-              <div className="space-y-6">
+              <div className="grid md:grid-cols-2 gap-6">
+                {contributionWays.map((way, idx) => {
+                  const Icon = way.icon;
+                  return (
+                    <Card key={idx} className="bg-red-950/20 border-red-400/30">
+                      <CardContent className="pt-6">
+                        <Icon className="h-8 w-8 text-red-400 mb-3" />
+                        <h3 className="text-lg font-bold text-red-300 mb-2">
+                          {way.title}
+                        </h3>
+                        <p className="text-sm text-red-200/70 mb-4">
+                          {way.description}
+                        </p>
+                        <ul className="space-y-2">
+                          {way.ways.map((w, i) => (
+                            <li
+                              key={i}
+                              className="flex items-center gap-2 text-sm text-red-300"
+                            >
+                              <CheckCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
+                              {w}
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* How to Contribute */}
+          <section className="py-16 border-t border-red-400/10 bg-black/40">
+            <div className="container mx-auto max-w-6xl px-4">
+              <h2 className="text-3xl font-bold text-red-300 mb-12">
+                Contribution Process
+              </h2>
+              <div className="grid md:grid-cols-5 gap-4">
+                {steps.map((item, idx) => (
+                  <div key={idx} className="relative">
+                    <Card className="bg-red-950/20 border-red-400/30">
+                      <CardContent className="pt-6">
+                        <div className="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-pink-500 flex items-center justify-center text-white font-bold mb-3">
+                          {item.step}
+                        </div>
+                        <h3 className="font-bold text-red-300 mb-2 text-sm">
+                          {item.title}
+                        </h3>
+                        <p className="text-xs text-red-200/70">
+                          {item.description}
+                        </p>
+                      </CardContent>
+                    </Card>
+                    {idx < steps.length - 1 && (
+                      <div className="hidden md:block absolute top-1/2 right-0 translate-x-1/2 transform">
+                        <ArrowRight className="h-5 w-5 text-red-400/40" />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Featured Projects */}
+          <section className="py-16">
+            <div className="container mx-auto max-w-6xl px-4">
+              <h2 className="text-3xl font-bold text-red-300 mb-8">
+                Open Projects
+              </h2>
+              <div className="space-y-4">
                 {projects.map((project, idx) => (
                   <Card
                     key={idx}
                     className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-all"
                   >
                     <CardContent className="pt-6">
-                      <div className="flex items-start justify-between mb-4">
+                      <div className="grid md:grid-cols-2 gap-6">
                         <div>
-                          <h3 className="text-xl font-bold text-red-300 mb-1">
+                          <h3 className="text-lg font-bold text-red-300 mb-2">
                             {project.name}
                           </h3>
-                          <p className="text-sm text-red-200/70">
+                          <p className="text-sm text-red-200/70 mb-3">
                             {project.description}
                           </p>
-                        </div>
-                        <div className="text-right">
-                          <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 mb-2">
-                            ⭐ {project.stars}
-                          </Badge>
-                          <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 block">
-                            {project.language}
-                          </Badge>
-                        </div>
-                      </div>
-
-                      <div className="space-y-3 pt-4 border-t border-red-400/10">
-                        <p className="text-xs font-semibold text-red-400">
-                          Good for Beginners
-                        </p>
-                        <div className="flex flex-wrap gap-2">
-                          {project.goodFirst.map((tag, i) => (
-                            <Badge
-                              key={i}
-                              className="bg-red-500/10 text-red-300 border border-red-400/30 text-xs"
-                            >
-                              {tag}
+                          <div className="flex flex-wrap gap-2">
+                            <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
+                              <Star className="h-3 w-3 mr-1" />
+                              {project.stars}
                             </Badge>
-                          ))}
+                            <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
+                              {project.language}
+                            </Badge>
+                            <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
+                              {project.issues}
+                            </Badge>
+                          </div>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <p className="text-xs text-red-400 font-semibold mb-1">
+                              DIFFICULTY
+                            </p>
+                            <Badge
+                              className={`${
+                                project.difficulty === "Beginner"
+                                  ? "bg-green-500/20 text-green-300"
+                                  : project.difficulty === "Intermediate"
+                                    ? "bg-yellow-500/20 text-yellow-300"
+                                    : "bg-orange-500/20 text-orange-300"
+                              } border`}
+                            >
+                              {project.difficulty}
+                            </Badge>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            className="text-red-300 hover:bg-red-500/10"
+                          >
+                            View →
+                          </Button>
                         </div>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="text-red-300 hover:bg-red-500/10 mt-2"
-                        >
-                          <Github className="h-4 w-4 mr-1" />
-                          View on GitHub
-                        </Button>
                       </div>
                     </CardContent>
                   </Card>
@@ -148,54 +297,21 @@ export default function FoundationContribute() {
             </div>
           </section>
 
-          <section className="py-16 border-t border-red-400/10 bg-black/40">
-            <div className="container mx-auto max-w-6xl px-4">
-              <h2 className="text-3xl font-bold text-red-300 mb-8">
-                Ways to Contribute
-              </h2>
-              <div className="grid md:grid-cols-2 gap-6">
-                {contributionTypes.map((type, idx) => (
-                  <Card
-                    key={idx}
-                    className="bg-red-950/20 border-red-400/30"
-                  >
-                    <CardContent className="pt-6">
-                      <h3 className="text-lg font-bold text-red-300 mb-2">
-                        {type.title}
-                      </h3>
-                      <p className="text-sm text-red-200/70 mb-4">
-                        {type.description}
-                      </p>
-                      <ul className="space-y-2">
-                        {type.benefits.map((benefit, i) => (
-                          <li
-                            key={i}
-                            className="flex items-center gap-2 text-xs text-red-300"
-                          >
-                            <CheckCircle className="h-4 w-4 text-red-400" />
-                            {benefit}
-                          </li>
-                        ))}
-                      </ul>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            </div>
-          </section>
-
+          {/* CTA */}
           <section className="py-16 border-t border-red-400/10">
             <div className="container mx-auto max-w-4xl px-4 text-center">
               <h2 className="text-3xl font-bold text-red-300 mb-4">
                 Ready to Contribute?
               </h2>
               <p className="text-lg text-red-100/80 mb-8">
-                Choose a project and start making an impact today.
+                Check out our GitHub repositories and start contributing today.
+                Even small contributions make a big difference!
               </p>
               <Button
-                className="bg-red-400 text-black hover:bg-red-300"
+                className="bg-red-400 text-black hover:bg-red-300 shadow-[0_0_30px_rgba(239,68,68,0.35)]"
+                onClick={() => navigate("/foundation/learn-more")}
               >
-                Browse Repositories
+                View Learning Resources
                 <ArrowRight className="ml-2 h-4 w-4" />
               </Button>
             </div>