Create FoundationGetInvolved.tsx

cgen-6fd166f8b7e542b1b45569d16fe3be49

client/pages/foundation/FoundationGetInvolved.tsx

@@ -2,69 +2,155 @@ 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 { Calendar, Users, Zap, Heart, ArrowRight } from "lucide-react";
+import {
+  Users,
+  Calendar,
+  MessageSquare,
+  Trophy,
+  ArrowRight,
+  CheckCircle,
+  Zap,
+  Heart,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 export default function FoundationGetInvolved() {
   const navigate = useNavigate();
 
-  const events = [
+  const involvementWays = [
     {
-      title: "Weekly Game Dev Workshop",
+      icon: Users,
-      date: "Every Saturday, 10 AM",
+      title: "Join the Community",
-      attendees: "150+/week",
+      description: "Connect with thousands of developers worldwide",
-      level: "Beginner",
+      actions: [
-      description: "Interactive sessions on game development fundamentals",
+        "Join our Discord server",
+        "Attend community events",
+        "Participate in discussions",
+        "Share your projects",
+      ],
     },
     {
-      title: "Roblox Developer Meetup",
+      icon: Calendar,
-      date: "1st Thursday, 7 PM",
+      title: "Attend Workshops",
-      attendees: "50+/month",
+      description: "Learn from experts in interactive sessions",
-      level: "All Levels",
+      actions: [
-      description: "Connect with other Roblox developers in your area",
+        "Beginner workshops",
+        "Advanced seminars",
+        "Live coding sessions",
+        "Q&A with experts",
+      ],
     },
     {
-      title: "Advanced Architecture Conference",
+      icon: MessageSquare,
-      date: "Monthly",
+      title: "Mentor & Learn",
-      attendees: "200+",
+      description: "Help others and grow through mentorship",
-      level: "Advanced",
+      actions: [
-      description: "Deep dive into scalable game architecture",
+        "Become a mentor",
+        "Find a mentor",
+        "Peer learning groups",
+        "Knowledge sharing",
+      ],
     },
     {
-      title: "Game Jam Challenge",
+      icon: Trophy,
-      date: "Quarterly",
+      title: "Showcase Your Work",
-      attendees: "500+",
+      description: "Get recognition for your projects",
-      level: "All Levels",
+      actions: [
-      description: "Build a game in 48 hours and compete",
+        "Submit projects",
+        "Win recognition",
+        "Get featured",
+        "Build your portfolio",
+      ],
     },
   ];
 
-  const ways = [
+  const communityChannels = [
     {
-      title: "Attend Workshops",
+      name: "Discord Server",
-      description: "Join our free community workshops and learn from experts",
+      description: "Real-time chat with the community",
-      icon: <Calendar className="h-6 w-6" />,
+      members: "5K+",
+      status: "Active",
+      icon: MessageSquare,
     },
     {
-      title: "Join Discussions",
+      name: "GitHub Discussions",
-      description: "Participate in forums and ask questions in Discord",
+      description: "Ask questions and share ideas",
-      icon: <Users className="h-6 w-6" />,
+      members: "2K+",
+      status: "Active",
+      icon: Users,
     },
     {
-      title: "Volunteer",
+      name: "Monthly Meetups",
-      description: "Help organize events and mentor new developers",
+      description: "In-person and virtual meetups",
-      icon: <Heart className="h-6 w-6" />,
+      members: "500+",
+      status: "Monthly",
+      icon: Calendar,
     },
     {
-      title: "Share Knowledge",
+      name: "Forum",
-      description: "Write tutorials or speak at our events",
+      description: "Deep discussions and long-form posts",
-      icon: <Zap className="h-6 w-6" />,
+      members: "3K+",
+      status: "Active",
+      icon: MessageSquare,
+    },
+  ];
+
+  const events = [
+    {
+      title: "Game Jam - January 2025",
+      date: "Jan 25-27, 2025",
+      type: "Competition",
+      participants: "200+",
+      prize: "$5K",
+    },
+    {
+      title: "Dev Talk Series",
+      date: "Every 2nd Tuesday",
+      type: "Workshop",
+      participants: "100+",
+      prize: "Certificates",
+    },
+    {
+      title: "Roblox Creator Summit",
+      date: "Mar 15-17, 2025",
+      type: "Conference",
+      participants: "1K+",
+      prize: "Sponsorships",
+    },
+    {
+      title: "Multiplayer Game Hackathon",
+      date: "Feb 8-9, 2025",
+      type: "Competition",
+      participants: "150+",
+      prize: "$3K",
+    },
+  ];
+
+  const mentorshipProgram = [
+    {
+      role: "Junior Developer",
+      duration: "12 weeks",
+      description: "Learn game development fundamentals with a mentor",
+      commitment: "5-10 hours/week",
+    },
+    {
+      role: "Intermediate Developer",
+      duration: "8 weeks",
+      description: "Master advanced concepts and best practices",
+      commitment: "3-5 hours/week",
+    },
+    {
+      role: "Advanced Developer",
+      duration: "Ongoing",
+      description: "Mentor others and contribute to major projects",
+      commitment: "2-4 hours/week",
     },
   ];
 
   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" />
@@ -72,6 +158,7 @@ export default function FoundationGetInvolved() {
         <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
@@ -83,14 +170,100 @@ export default function FoundationGetInvolved() {
               </Button>
 
               <h1 className="text-4xl lg:text-5xl font-black text-red-300 mb-4">
-                Get Involved in the Community
+                Get Involved
               </h1>
               <p className="text-lg text-red-100/80 max-w-3xl">
-                Join 50K+ developers building and learning together.
+                Join our thriving community of developers. Whether you're just starting or a seasoned pro, there's a place for you here.
               </p>
             </div>
           </section>
 
+          {/* Ways to Get Involved */}
+          <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">
+                Ways to Participate
+              </h2>
+              <div className="grid md:grid-cols-2 gap-6">
+                {involvementWays.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.actions.map((action, 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" />
+                              {action}
+                            </li>
+                          ))}
+                        </ul>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* Community Channels */}
+          <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">
+                Community Channels
+              </h2>
+              <div className="grid md:grid-cols-2 gap-6">
+                {communityChannels.map((channel, idx) => {
+                  const Icon = channel.icon;
+                  return (
+                    <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-3">
+                          <Icon className="h-6 w-6 text-red-400" />
+                          <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
+                            {channel.status}
+                          </Badge>
+                        </div>
+                        <h3 className="text-lg font-bold text-red-300 mb-2">
+                          {channel.name}
+                        </h3>
+                        <p className="text-sm text-red-200/70 mb-4">
+                          {channel.description}
+                        </p>
+                        <div className="flex items-center justify-between">
+                          <p className="text-xs text-red-400 font-semibold">
+                            {channel.members} members
+                          </p>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-red-300 hover:bg-red-500/10"
+                          >
+                            Join →
+                          </Button>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+
+          {/* Upcoming Events */}
           <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">
@@ -103,35 +276,42 @@ export default function FoundationGetInvolved() {
                     className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-all"
                   >
                     <CardContent className="pt-6">
-                      <div className="grid md:grid-cols-4 gap-4">
+                      <div className="grid md:grid-cols-2 lg:grid-cols-5 gap-4">
                         <div>
-                          <h3 className="text-lg font-bold text-red-300">
+                          <h3 className="text-lg font-bold text-red-300 mb-1">
                             {event.title}
                           </h3>
-                        </div>
+                          <Badge className="bg-red-500/20 text-red-300 border border-red-400/40 text-xs">
-                        <div>
+                            {event.type}
-                          <p className="text-xs font-semibold text-red-400 mb-1">
-                            WHEN
-                          </p>
-                          <p className="text-sm text-red-200/70">
-                            {event.date}
-                          </p>
-                        </div>
-                        <div>
-                          <p className="text-xs font-semibold text-red-400 mb-1">
-                            LEVEL
-                          </p>
-                          <Badge className="bg-red-500/20 text-red-300 border border-red-400/40">
-                            {event.level}
                           </Badge>
                         </div>
-                        <div className="text-right">
+                        <div>
-                          <p className="text-xs font-semibold text-red-400 mb-1">
+                          <p className="text-xs text-red-400 font-semibold mb-1">
-                            ATTENDEES
+                            DATE
                           </p>
-                          <p className="text-sm text-red-300">
+                          <p className="text-red-300">{event.date}</p>
-                            {event.attendees}
+                        </div>
+                        <div>
+                          <p className="text-xs text-red-400 font-semibold mb-1">
+                            PARTICIPANTS
                           </p>
+                          <p className="text-red-300">{event.participants}</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-red-400 font-semibold mb-1">
+                            PRIZE/REWARD
+                          </p>
+                          <p className="text-red-300 font-semibold">
+                            {event.prize}
+                          </p>
+                        </div>
+                        <div className="flex items-end">
+                          <Button
+                            className="w-full bg-red-400 text-black hover:bg-red-300"
+                            size="sm"
+                          >
+                            Register
+                          </Button>
                         </div>
                       </div>
                     </CardContent>
@@ -141,25 +321,49 @@ export default function FoundationGetInvolved() {
             </div>
           </section>
 
+          {/* Mentorship Program */}
           <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 Participate
+                Mentorship Programs
               </h2>
-              <div className="grid md:grid-cols-2 gap-6">
+              <div className="grid md:grid-cols-3 gap-6">
-                {ways.map((way, idx) => (
+                {mentorshipProgram.map((program, idx) => (
-                  <Card
+                  <Card key={idx} className="bg-red-950/20 border-red-400/30">
-                    key={idx}
-                    className="bg-red-950/20 border-red-400/30"
-                  >
                     <CardContent className="pt-6">
-                      <div className="text-red-400 mb-3">{way.icon}</div>
+                      <div className="flex items-center justify-between mb-3">
-                      <h3 className="text-lg font-bold text-red-300 mb-2">
+                        <h3 className="text-lg font-bold text-red-300">
-                        {way.title}
+                          {program.role}
-                      </h3>
+                        </h3>
-                      <p className="text-sm text-red-200/70">
+                        <Heart className="h-5 w-5 text-red-400" />
-                        {way.description}
+                      </div>
+                      <p className="text-sm text-red-200/70 mb-4">
+                        {program.description}
                       </p>
+                      <div className="space-y-2 pt-4 border-t border-red-400/10">
+                        <div>
+                          <p className="text-xs text-red-400 font-semibold">
+                            DURATION
+                          </p>
+                          <p className="text-red-300">{program.duration}</p>
+                        </div>
+                        <div>
+                          <p className="text-xs text-red-400 font-semibold">
+                            TIME COMMITMENT
+                          </p>
+                          <p className="text-red-300">{program.commitment}</p>
+                        </div>
+                      </div>
+                      <Button
+                        className="w-full mt-4 bg-red-400 text-black hover:bg-red-300"
+                        size="sm"
+                      >
+                        {idx === 0
+                          ? "Find a Mentor"
+                          : idx === 1
+                            ? "Upgrade Level"
+                            : "Become a Mentor"}
+                      </Button>
                     </CardContent>
                   </Card>
                 ))}
@@ -167,18 +371,50 @@ export default function FoundationGetInvolved() {
             </div>
           </section>
 
+          {/* Community Stats */}
+          <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">
+                Our Community
+              </h2>
+              <div className="grid md:grid-cols-4 gap-6">
+                {[
+                  { label: "Active Members", value: "10K+" },
+                  { label: "Projects Shared", value: "5K+" },
+                  { label: "Monthly Events", value: "20+" },
+                  { label: "Open Issues", value: "500+" },
+                ].map((stat, idx) => (
+                  <Card
+                    key={idx}
+                    className="bg-red-950/30 border-red-400/40 text-center"
+                  >
+                    <CardContent className="pt-6">
+                      <p className="text-3xl font-black text-red-400 mb-2">
+                        {stat.value}
+                      </p>
+                      <p className="text-sm text-red-200/70">{stat.label}</p>
+                    </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 Join?
               </h2>
               <p className="text-lg text-red-100/80 mb-8">
-                Sign up for events and connect with other developers.
+                Whether you want to learn, teach, build, or contribute, there's
+                a community of developers waiting for you.
               </p>
               <Button
-                className="bg-red-400 text-black hover:bg-red-300"
+                className="bg-red-400 text-black shadow-[0_0_30px_rgba(239,68,68,0.35)] hover:bg-red-300"
+                onClick={() => navigate("/foundation/contribute")}
               >
-                Register for Next Event
+                Start Contributing
                 <ArrowRight className="ml-2 h-4 w-4" />
               </Button>
             </div>