496 lines
18 KiB
TypeScript
496 lines
18 KiB
TypeScript
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 },
|
|
];
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Connecting to Community..."
|
|
showProgress={true}
|
|
duration={1000}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-aethex-gradient">
|
|
{/* Hero Section */}
|
|
<section className="relative py-20 lg:py-32">
|
|
<div className="container mx-auto px-4 text-center relative z-10">
|
|
<div className="max-w-4xl mx-auto space-y-8">
|
|
<Badge
|
|
variant="outline"
|
|
className="border-aethex-400/50 text-aethex-400 animate-bounce-gentle"
|
|
>
|
|
<Users className="h-3 w-3 mr-1" />
|
|
AeThex Community
|
|
</Badge>
|
|
|
|
<h1 className="text-4xl lg:text-6xl font-bold leading-tight">
|
|
<span className="text-gradient-purple">
|
|
Join the Innovation Network
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
Connect with developers, creators, and innovators from around
|
|
the world. Share knowledge, collaborate on projects, and grow
|
|
together.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift"
|
|
>
|
|
<Link to="/discord" className="flex items-center space-x-2">
|
|
<MessageSquare className="h-5 w-5" />
|
|
<span>Join Discord</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-border/50 hover-lift"
|
|
>
|
|
<Link to="/github">View Projects</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Community Stats */}
|
|
<section className="py-16 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
|
{stats.map((stat, index) => {
|
|
const Icon = stat.icon;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="text-center space-y-3 animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<div className="flex justify-center">
|
|
<div className="p-3 rounded-lg bg-gradient-to-r from-aethex-500/20 to-neon-blue/20 border border-aethex-400/20">
|
|
<Icon className="h-6 w-6 text-aethex-400" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-3xl font-bold text-gradient">
|
|
{stat.value}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground uppercase tracking-wide">
|
|
{stat.label}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Community Platforms */}
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Connect on Your Favorite Platform
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Multiple ways to engage with the AeThex community
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
|
{platforms.map((platform, index) => {
|
|
const Icon = platform.icon;
|
|
return (
|
|
<Card
|
|
key={index}
|
|
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
<CardHeader>
|
|
<div
|
|
className={`mx-auto w-16 h-16 rounded-lg bg-gradient-to-r ${platform.color} flex items-center justify-center mb-4`}
|
|
>
|
|
<Icon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<CardTitle className="text-xl">{platform.name}</CardTitle>
|
|
<CardDescription>{platform.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 gap-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span>Members:</span>
|
|
<span className="font-semibold text-aethex-400">
|
|
{platform.members}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Activity:</span>
|
|
<span className="font-semibold text-aethex-400">
|
|
{platform.activity}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button asChild className="w-full">
|
|
<Link to={platform.link}>
|
|
Join Now
|
|
<ArrowRight className="h-4 w-4 ml-2" />
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Upcoming Events */}
|
|
<section className="py-20 bg-background/30">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Upcoming Events
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Join our community events and level up your skills
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
{events.map((event, index) => (
|
|
<Card
|
|
key={index}
|
|
className="border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-slide-right"
|
|
style={{ animationDelay: `${index * 0.1}s` }}
|
|
>
|
|
<CardContent className="p-6">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<h3 className="text-xl font-semibold text-gradient">
|
|
{event.title}
|
|
</h3>
|
|
<Badge
|
|
variant={
|
|
event.status === "Registration Open"
|
|
? "default"
|
|
: "outline"
|
|
}
|
|
className={
|
|
event.status === "Registration Open"
|
|
? "animate-pulse"
|
|
: ""
|
|
}
|
|
>
|
|
{event.status}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
|
|
<div className="flex items-center space-x-1">
|
|
<Calendar className="h-4 w-4" />
|
|
<span>{event.date}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<MapPin className="h-4 w-4" />
|
|
<span>{event.location}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
<Users className="h-4 w-4" />
|
|
<span>{event.participants} participants</span>
|
|
</div>
|
|
{event.prize && (
|
|
<div className="flex items-center space-x-1">
|
|
<Award className="h-4 w-4" />
|
|
<span>{event.prize} prize pool</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<Badge variant="outline">{event.type}</Badge>
|
|
<Button size="sm">
|
|
{event.status === "Registration Open"
|
|
? "Register"
|
|
: "Learn More"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Top Contributors */}
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="text-center mb-16 animate-slide-up">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
|
Community Heroes
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
Recognizing our most active and helpful community members
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
|
{contributors.map((contributor, index) => (
|
|
<Card
|
|
key={index}
|
|
className="text-center border-border/50 hover:border-aethex-400/50 transition-all duration-300 hover-lift animate-scale-in"
|
|
style={{ animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
<CardContent className="p-6">
|
|
<img
|
|
src={contributor.avatar}
|
|
alt={contributor.name}
|
|
className="w-20 h-20 rounded-full mx-auto mb-4 ring-4 ring-aethex-400/20"
|
|
/>
|
|
<h3 className="font-semibold text-lg text-gradient">
|
|
{contributor.name}
|
|
</h3>
|
|
<p className="text-sm text-muted-foreground mb-2">
|
|
{contributor.title}
|
|
</p>
|
|
<Badge variant="outline" className="mb-4">
|
|
{contributor.speciality}
|
|
</Badge>
|
|
|
|
<div className="space-y-2">
|
|
<div className="text-2xl font-bold text-aethex-400">
|
|
{contributor.contributions}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
Contributions
|
|
</div>
|
|
<div className="text-sm font-medium">
|
|
{contributor.badge}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-20 bg-background/30">
|
|
<div className="container mx-auto px-4 text-center">
|
|
<div className="max-w-3xl mx-auto space-y-8 animate-scale-in">
|
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient-purple">
|
|
Ready to Join Our Community?
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground">
|
|
Connect with thousands of developers, share your projects, and
|
|
grow your skills in our supportive and innovative community.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-center gap-4">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 glow-blue hover-lift text-lg px-8 py-6"
|
|
>
|
|
<Link to="/discord" className="flex items-center space-x-2">
|
|
<Heart className="h-5 w-5" />
|
|
<span>Join Community</span>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="border-aethex-400/50 hover:border-aethex-400 hover-lift text-lg px-8 py-6"
|
|
>
|
|
<Link to="/events">View All Events</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-8 mt-12">
|
|
<div className="text-center">
|
|
<Coffee className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Weekly Meetups</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Virtual coffee chats
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<Star className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Recognition</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Contributor rewards
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<TrendingUp className="h-8 w-8 text-aethex-400 mx-auto mb-2" />
|
|
<h3 className="font-semibold">Growth</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Learn & advance
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|