import { useState, useEffect, useRef } 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, MessageSquare, Twitter, ArrowRight, Star, Calendar, MapPin, Award, TrendingUp, Heart, Coffee, Code, Gamepad2, } from "lucide-react"; export default function Community() { const [isLoading, setIsLoading] = useState(true); const toastShownRef = useRef(false); useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); if (!toastShownRef.current) { aethexToast.system("Community hub connected"); toastShownRef.current = true; } }, 1000); return () => clearTimeout(timer); }, []); const platforms = [ { name: "Discord Server", description: "Real-time chat with developers and get instant help", icon: MessageSquare, 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 }, ]; const devConnectHighlights = [ { title: "Unified Creator Profiles", description: "Showcase your AeThex achievements, GitHub contributions, and live projects in one public hub.", icon: Users, }, { title: "Real-time Collaboration Rooms", description: "Spin up focused channels with voice, video, and whiteboards tailored for each build sprint.", icon: MessageCircle, }, { title: "Integrated Delivery Pipeline", description: "Track deployments, alerts, and community feedback with automated insights across your stack.", icon: TrendingUp, }, ]; 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}
); })}
{/* DevConnect Spotlight */}
New Platform

Introducing DevConnect

DevConnect is our dedicated hub for platform teams building the next wave of AeThex experiences. Launch collabs, monitor live services, and activate the Studio network — all from one command center.

{devConnectHighlights.map((highlight, index) => { const Icon = highlight.icon; return (

{highlight.title}

{highlight.description}

); })}
DevConnect syncs directly with AeThex profiles, so your activity, streaks, and achievements follow you across every build.
{/* 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

); }