diff --git a/client/pages/Community.tsx b/client/pages/Community.tsx new file mode 100644 index 00000000..5259dac8 --- /dev/null +++ b/client/pages/Community.tsx @@ -0,0 +1,413 @@ +import { useState, useEffect } from "react"; +import Layout from "@/components/Layout"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import LoadingScreen from "@/components/LoadingScreen"; +import { aethexToast } from "@/lib/aethex-toast"; +import { Link } from "react-router-dom"; +import { + Users, + MessageCircle, + Github, + Discord, + Twitter, + ArrowRight, + Star, + Calendar, + MapPin, + Award, + TrendingUp, + Heart, + Coffee, + Code, + Gamepad2 +} from "lucide-react"; + +export default function Community() { + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + aethexToast.system("Community hub connected"); + }, 1000); + + return () => clearTimeout(timer); + }, []); + + const platforms = [ + { + name: "Discord Server", + description: "Real-time chat with developers and get instant help", + icon: Discord, + members: "15K+ members", + activity: "500+ daily active", + link: "/discord", + color: "from-purple-500 to-indigo-600" + }, + { + name: "GitHub Community", + description: "Contribute to open source projects and share code", + icon: Github, + members: "8K+ contributors", + activity: "200+ repositories", + link: "/github", + color: "from-gray-700 to-gray-900" + }, + { + name: "Twitter Community", + description: "Follow the latest updates and join conversations", + icon: Twitter, + members: "25K+ followers", + activity: "Daily updates", + link: "/twitter", + color: "from-blue-400 to-blue-600" + } + ]; + + const events = [ + { + title: "AeThex Game Jam 2024", + date: "January 15-17, 2025", + location: "Online", + type: "Competition", + participants: 500, + prize: "$10,000", + status: "Registration Open" + }, + { + title: "Weekly Developer Meetup", + date: "Every Wednesday, 7 PM PST", + location: "Discord Voice Chat", + type: "Meetup", + participants: 50, + prize: null, + status: "Recurring" + }, + { + title: "AI in Games Workshop", + date: "December 20, 2024", + location: "San Francisco & Online", + type: "Workshop", + participants: 100, + prize: null, + status: "Upcoming" + } + ]; + + const contributors = [ + { + name: "Alex Developer", + avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", + title: "Community Leader", + contributions: 156, + badge: "🏆 Top Contributor", + speciality: "Game Development" + }, + { + name: "Sarah Coder", + avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b029?w=100&h=100&fit=crop&crop=face", + title: "Documentation Expert", + contributions: 89, + badge: "📚 Knowledge Hero", + speciality: "Technical Writing" + }, + { + name: "Jordan AI", + avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", + title: "AI Researcher", + contributions: 134, + badge: "🧠 AI Pioneer", + speciality: "Machine Learning" + } + ]; + + const stats = [ + { label: "Community Members", value: "50K+", icon: Users }, + { label: "Daily Messages", value: "2K+", icon: MessageCircle }, + { label: "Open Source Projects", value: "200+", icon: Code }, + { label: "Games Created", value: "1K+", icon: Gamepad2 } + ]; + + if (isLoading) { + return ; + } + + return ( + +
+ {/* Hero Section */} +
+
+
+ + + AeThex Community + + +

+ Join the Innovation Network +

+ +

+ Connect with developers, creators, and innovators from around the world. + Share knowledge, collaborate on projects, and grow together. +

+ +
+ + +
+
+
+
+ + {/* Community Stats */} +
+
+
+ {stats.map((stat, index) => { + const Icon = stat.icon; + return ( +
+
+
+ +
+
+
+
{stat.value}
+

{stat.label}

+
+
+ ); + })} +
+
+
+ + {/* Community Platforms */} +
+
+
+

+ Connect on Your Favorite Platform +

+

+ Multiple ways to engage with the AeThex community +

+
+ +
+ {platforms.map((platform, index) => { + const Icon = platform.icon; + return ( + + +
+ +
+ {platform.name} + {platform.description} + + +
+
+ Members: + {platform.members} +
+
+ Activity: + {platform.activity} +
+
+ + + + + ); + })} +
+
+
+ + {/* Upcoming Events */} +
+
+
+

+ Upcoming Events +

+

+ Join our community events and level up your skills +

+
+ +
+ {events.map((event, index) => ( + + +
+
+
+

{event.title}

+ + {event.status} + +
+ +
+
+ + {event.date} +
+
+ + {event.location} +
+
+ + {event.participants} participants +
+ {event.prize && ( +
+ + {event.prize} prize pool +
+ )} +
+
+ +
+ {event.type} + +
+
+ + + ))} +
+
+
+ + {/* Top Contributors */} +
+
+
+

+ Community Heroes +

+

+ Recognizing our most active and helpful community members +

+
+ +
+ {contributors.map((contributor, index) => ( + + + {contributor.name} +

{contributor.name}

+

{contributor.title}

+ {contributor.speciality} + +
+
{contributor.contributions}
+
Contributions
+
{contributor.badge}
+
+ + + ))} +
+
+
+ + {/* CTA Section */} +
+
+
+

+ Ready to Join Our Community? +

+

+ Connect with thousands of developers, share your projects, and grow your skills + in our supportive and innovative community. +

+ +
+ + +
+ +
+
+ +

Weekly Meetups

+

Virtual coffee chats

+
+
+ +

Recognition

+

Contributor rewards

+
+
+ +

Growth

+

Learn & advance

+
+
+
+
+
+
+ + ); +}