Skip to content

Commit a5720d9

Browse files
Alien69FlowAlien69Flow
authored
Update Clubs.tsx
Signed-off-by: Aitor Alien <[email protected]>
1 parent b3ec379 commit a5720d9

File tree

1 file changed

+296
-48
lines changed

1 file changed

+296
-48
lines changed

‎src/pages/Clubs.tsx‎

Lines changed: 296 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,309 @@
11
import React from 'react';
2+
import StarBackground from '@/components/StarBackground';
3+
import Header from '@/components/Header';
4+
import Footer from '@/components/Footer';
5+
import { Users, Rocket, Calendar, MessageCircle, Zap, Shield } from 'lucide-react';
6+
import { Button } from '@/components/ui/button';
7+
8+
type ClubProps = {
9+
name: string;
10+
description: string;
11+
members: number;
12+
icon: React.ReactNode;
13+
category: string;
14+
categoryColor: string;
15+
bgColor: string;
16+
};
17+
18+
const ClubCard = ({ club }: { club: ClubProps }) => (
19+
<div className={`${club.bgColor} p-6 rounded-xl backdrop-blur-md overflow-hidden relative group hover:transform hover:scale-[1.02] transition-all duration-300 border border-alien-gold/20 hover:border-alien-gold/40`}>
20+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-alien-space-dark/60 to-alien-space-dark/90 z-0"></div>
21+
22+
<div className="relative z-10">
23+
<div className="flex justify-between items-start mb-6">
24+
<div className="p-4 bg-alien-space-dark/80 rounded-xl backdrop-blur-md border border-alien-gold/30 group-hover:border-alien-gold/50 transition-all duration-300">
25+
{club.icon}
26+
</div>
27+
<span className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm`}>
28+
{club.category}
29+
</span>
30+
</div>
31+
32+
<h3 className="text-xl font-bold text-alien-gold mb-3 font-nasalization group-hover:text-alien-gold-light transition-colors">{club.name}</h3>
33+
<p className="text-gray-200 mb-6 text-sm font-[Exo] leading-relaxed">{club.description}</p>
34+
35+
<div className="flex justify-between items-center">
36+
<div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm">
37+
<Users className="h-4 w-4 text-alien-green mr-2" />
38+
<span className="text-sm text-alien-green font-medium">{club.members.toLocaleString()} members</span>
39+
</div>
40+
<Button variant="outline" className="border-alien-gold/50 text-alien-gold hover:bg-alien-gold/20 hover:border-alien-gold text-sm px-4 py-2 h-auto font-[Exo] font-medium backdrop-blur-sm">
41+
Join Club
42+
</Button>
43+
</div>
44+
</div>
45+
</div>
46+
);
247

3-
// Revert to a simple, original-style layout while we clarify the redesign
448
const Clubs: React.FC = () => {
5-
const clubs = [
6-
{ name: 'Aragon DAO', logo: '/lovable-uploads/AragonDAOLogo.svg' },
7-
{ name: 'Virgo', logo: '/lovable-uploads/VirgoLogo.svg' },
8-
{ name: 'Unity Learn', logo: '/lovable-uploads/UnityLearnLogo.svg' },
9-
{ name: 'Udacity', logo: '/lovable-uploads/UdacityLogo.svg' },
10-
{ name: 'OpenUpEd', logo: '/lovable-uploads/OpenUpEdLogo.jpeg' },
11-
{ name: 'OE Global', logo: '/lovable-uploads/OEGlobalLogo.jpeg' },
12-
{ name: 'UNSSC', logo: '/lovable-uploads/UNSSCLogo.png' },
13-
{ name: 'Skillshare', logo: '/lovable-uploads/SkillShareLogo.jpeg' },
14-
{ name: 'DappRadar', logo: '/lovable-uploads/DappRadarLogo.jpeg' },
15-
{ name: 'CoinMarketCap', logo: '/lovable-uploads/CoinMarketCapLogo.jpeg' },
16-
{ name: 'CoinGecko', logo: '/lovable-uploads/CoinGeckoLogo.svg' },
17-
{ name: 'CoinGlass', logo: '/lovable-uploads/CoinGlassLogo.jpeg' },
18-
{ name: 'Behance', logo: '/lovable-uploads/BehanceLogo.jpeg' },
19-
{ name: 'Upwork', logo: '/lovable-uploads/UpWorkLogo.png' },
20-
{ name: 'WeWork', logo: '/lovable-uploads/WeWorkLogo.png' },
21-
{ name: 'AulaFacil', logo: '/lovable-uploads/AulaFacilLogo.png' },
22-
{ name: 'Grow with Google', logo: '/lovable-uploads/GrowGoogleLogo.png' },
23-
{ name: 'Hotmart', logo: '/lovable-uploads/HotmartLogo.png' },
24-
{ name: 'MasterClass', logo: '/lovable-uploads/MasterClasssLogo.jpeg' },
25-
{ name: 'edX', logo: '/lovable-uploads/edXLogo.png' },
26-
{ name: 'MOOC', logo: '/lovable-uploads/MoocLogo.png' },
49+
const featuredClubs: ClubProps[] = [
50+
{
51+
name: "Δ CashFlow",
52+
description: "Advanced earning strategies and winning analysis for interplanetary assets.",
53+
members: 314159,
54+
icon: <Zap className="h-6 w-6 text-alien-gold" />,
55+
category: "CashFlow",
56+
categoryColor: "bg-blue-500/80 text-white border border-blue-400/50",
57+
bgColor: "bg-gradient-to-br from-blue-900/40 to-purple-900/40"
58+
},
59+
{
60+
name: "Δ EcoFlow",
61+
description: "Shaping the planet's present through collaborative decision-making with budgets and proposals.",
62+
members: 161803,
63+
icon: <Shield className="h-6 w-6 text-alien-gold" />,
64+
category: "DAO",
65+
categoryColor: "bg-emerald-500/80 text-white border border-emerald-400/50",
66+
bgColor: "bg-gradient-to-br from-emerald-900/40 to-green-900/40"
67+
},
68+
{
69+
name: "ΔGameFlow ΔWeedFlow ΔXFlow",
70+
description: "Discovering and creating digital artifacts across the multiverse with utility in reality.",
71+
members: 3712,
72+
icon: <Rocket className="h-6 w-6 text-alien-gold" />,
73+
category: "NFTs",
74+
categoryColor: "bg-pink-500/80 text-white border border-pink-400/50",
75+
bgColor: "bg-gradient-to-br from-pink-900/40 to-red-900/40"
76+
}
2777
];
78+
79+
const allClubs: ClubProps[] = [
80+
...featuredClubs,
81+
{
82+
name: "DeSci: Research, Development and Innovation",
83+
description: "Advancing scientific discovery through decentralized collaboration.",
84+
members: 843,
85+
icon: <Rocket className="h-6 w-6 text-alien-gold" />,
86+
category: "DeSci",
87+
categoryColor: "bg-cyan-500/80 text-white border border-cyan-400/50",
88+
bgColor: "bg-gradient-to-br from-cyan-900/40 to-blue-900/40"
89+
},
90+
{
91+
name: "BioFi Innovators",
92+
description: "Exploring the intersection of biology, blockchain, and finance.",
93+
members: 621,
94+
icon: <Rocket className="h-6 w-6 text-alien-gold" />,
95+
category: "BioFi",
96+
categoryColor: "bg-green-500/80 text-white border border-green-400/50",
97+
bgColor: "bg-gradient-to-br from-green-900/40 to-teal-900/40"
98+
},
99+
{
100+
name: "ReFi Guardians",
101+
description: "Protecting and regenerating ecosystems through sustainable finance.",
102+
members: 1129,
103+
icon: <Shield className="h-6 w-6 text-alien-gold" />,
104+
category: "ReFi",
105+
categoryColor: "bg-lime-500/80 text-white border border-lime-400/50",
106+
bgColor: "bg-gradient-to-br from-lime-900/40 to-green-900/40"
107+
},
108+
{
109+
name: "RWA Architects",
110+
description: "Tokenizing and optimizing real-world assets on the blockchain.",
111+
members: 794,
112+
icon: <Rocket className="h-6 w-6 text-alien-gold" />,
113+
category: "RWA",
114+
categoryColor: "bg-amber-500/80 text-white border border-amber-400/50",
115+
bgColor: "bg-gradient-to-br from-amber-900/40 to-orange-900/40"
116+
},
117+
{
118+
name: "IPFS Guardians",
119+
description: "Building and maintaining decentralized storage infrastructure.",
120+
members: 528,
121+
icon: <Shield className="h-6 w-6 text-alien-gold" />,
122+
category: "Infrastructure",
123+
categoryColor: "bg-indigo-500/80 text-white border border-indigo-400/50",
124+
bgColor: "bg-gradient-to-br from-indigo-900/40 to-violet-900/40"
125+
},
126+
{
127+
name: "Social Networkers",
128+
description: "Creating decentralized social platforms for the community.",
129+
members: 1847,
130+
icon: <Zap className="h-6 w-6 text-alien-gold" />,
131+
category: "SocialFi",
132+
categoryColor: "bg-rose-500/80 text-white border border-rose-400/50",
133+
bgColor: "bg-gradient-to-br from-rose-900/40 to-pink-900/40"
134+
},
135+
];
136+
137+
const upcomingEvents = [
138+
{
139+
title: "Trading Masterclass",
140+
date: "Dec 26, 2025",
141+
time: "18:00 UTC",
142+
club: "Cosmic Traders"
143+
},
144+
{
145+
title: "Governance Proposal Review",
146+
date: "Dec 28, 2025",
147+
time: "14:00 UTC",
148+
club: "Governance Council"
149+
},
150+
{
151+
title: "NFT Creation Workshop",
152+
date: "Dec 30, 2025",
153+
time: "16:00 UTC",
154+
club: "NFT Explorers"
155+
}
156+
];
157+
158+
const partners = [
159+
{ name: "Discord", url: "https://discord.com/" },
160+
{ name: "Telegram", url: "https://telegram.org/" },
161+
{ name: "Twitter", url: "https://twitter.com/" },
162+
{ name: "GitHub", url: "https://github.com/" },
163+
{ name: "Medium", url: "https://medium.com/" },
164+
{ name: "Reddit", url: "https://reddit.com/" }
165+
];
166+
28167
return (
29-
<div className="min-h-screen relative">
30-
31-
<main className="container mx-auto px-4 pt-28 pb-20 relative z-10">
32-
<div className="max-w-5xl mx-auto text-center">
33-
<img
34-
src="/lovable-uploads/ClubLogo.png"
35-
alt="Clubs Official Logo"
36-
className="mx-auto h-16 w-16 object-contain mb-6"
37-
/>
38-
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold font-nasalization mb-4">Clubs</h1>
39-
<p className="text-gray-300 font-[Exo] max-w-2xl mx-auto">
40-
Descubre clubs y partners oficiales de la comunidad AlienFlowSpace.
41-
</p>
42-
43-
<div className="mt-12 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6">
44-
{clubs.map((club) => (
45-
<div key={club.name} className="card-border rounded-xl p-4 flex flex-col items-center justify-center bg-transparent">
46-
<img
47-
src={club.logo}
48-
alt={`${club.name} club partner logo`}
49-
className="h-12 w-auto object-contain mb-3"
50-
loading="lazy"
51-
/>
52-
<h3 className="text-sm text-alien-gold font-semibold text-center">{club.name}</h3>
168+
<div className="min-h-screen bg-alien-space relative">
169+
<StarBackground />
170+
171+
{/* Cosmic background image */}
172+
<div
173+
className="fixed inset-0 pointer-events-none"
174+
style={{
175+
backgroundImage: `url('/lovable-uploads/630f07a8-9ff5-4bd8-9881-91336cfaf826.png')`,
176+
backgroundSize: 'cover',
177+
backgroundPosition: 'center',
178+
backgroundRepeat: 'no-repeat',
179+
opacity: 0.12,
180+
zIndex: -25
181+
}}
182+
/>
183+
184+
{/* Overlay for better readability */}
185+
<div
186+
className="fixed inset-0 pointer-events-none bg-black/50 backdrop-blur-[0.5px]"
187+
style={{ zIndex: -20 }}
188+
/>
189+
190+
<Header />
191+
<main className="container mx-auto px-4 pt-28 pb-16 relative z-10">
192+
<div className="max-w-6xl mx-auto">
193+
<div className="text-center mb-16">
194+
<div className="inline-flex items-center justify-center w-20 h-20 bg-alien-gold/20 rounded-full mb-6 border-2 border-alien-gold/40 backdrop-blur-md">
195+
<img
196+
src="/lovable-uploads/ClubLogo.png"
197+
alt="Clubs Official Logo"
198+
className="h-12 w-12 object-contain"
199+
/>
200+
</div>
201+
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-6 font-nasalization text-glow">Clubs</h1>
202+
<p className="text-xl text-gray-300 max-w-3xl mx-auto font-[Exo] leading-relaxed">
203+
Join specialized communities within the AlienFlowSpace ecosystem to connect with like-minded individuals across the multiverse.
204+
</p>
205+
</div>
206+
207+
{/* Featured Clubs */}
208+
<div className="mb-16">
209+
<h2 className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-center text-glow">Featured Clubs</h2>
210+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
211+
{featuredClubs.map((club, index) => (
212+
<ClubCard key={index} club={club} />
213+
))}
214+
</div>
215+
</div>
216+
217+
{/* Club Activity */}
218+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
219+
<div className="lg:col-span-2">
220+
<h2 className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-glow">All Clubs</h2>
221+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
222+
{allClubs.map((club, index) => (
223+
<ClubCard key={`all-${index}`} club={club} />
224+
))}
225+
</div>
226+
</div>
227+
228+
<div className="space-y-8">
229+
<div>
230+
<h2 className="text-2xl font-bold text-alien-gold mb-6 font-nasalization">Upcoming Events</h2>
231+
<div className="space-y-4">
232+
{upcomingEvents.map((event, index) => (
233+
<div key={index} className="bg-alien-space-dark/80 p-6 rounded-xl backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-300">
234+
<div className="flex items-start gap-4">
235+
<div className="p-3 bg-alien-space-light/60 rounded-full border border-alien-gold/30">
236+
<Calendar className="h-5 w-5 text-alien-gold" />
237+
</div>
238+
<div className="flex-1">
239+
<h4 className="font-semibold text-alien-gold font-[Exo] mb-1">{event.title}</h4>
240+
<p className="text-sm text-gray-300 font-[Exo] mb-2">{event.club}</p>
241+
<div className="flex items-center text-xs text-alien-green">
242+
<Calendar className="h-3 w-3 mr-1" />
243+
<span>{event.date} · {event.time}</span>
244+
</div>
245+
</div>
246+
</div>
247+
</div>
248+
))}
249+
250+
<Button variant="outline" className="w-full border-alien-gold/40 text-alien-gold hover:bg-alien-gold/20 hover:border-alien-gold/60 mt-4 font-[Exo] backdrop-blur-sm">
251+
View All Events
252+
</Button>
253+
</div>
254+
</div>
255+
256+
{/* Create Club CTA */}
257+
<div className="bg-gradient-to-br from-alien-green/30 to-alien-gold/30 p-8 rounded-xl backdrop-blur-md border border-alien-gold/30">
258+
<h3 className="text-xl font-bold text-alien-gold mb-4 font-nasalization text-glow">Start Your Own Club</h3>
259+
<p className="text-sm text-gray-200 mb-6 font-[Exo] leading-relaxed">
260+
Have a unique interest not represented yet? Create your own club and invite others to join.
261+
</p>
262+
<Button className="w-full bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-[Exo] font-semibold">
263+
Create Club
264+
</Button>
265+
</div>
266+
</div>
267+
</div>
268+
269+
{/* Community Stats */}
270+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
271+
{[
272+
{ value: "15+", label: "Active Clubs" },
273+
{ value: "28.5K", label: "Members" },
274+
{ value: "450+", label: "Events Held" },
275+
{ value: "142", label: "Countries" }
276+
].map((stat, index) => (
277+
<div key={index} className="bg-alien-space-dark/80 p-8 rounded-xl text-center backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-300 hover:transform hover:scale-105">
278+
<p className="text-4xl font-bold text-alien-gold mb-2 font-nasalization text-glow">{stat.value}</p>
279+
<p className="text-sm text-gray-300 font-[Exo]">{stat.label}</p>
53280
</div>
54281
))}
55282
</div>
283+
284+
{/* Partners Section */}
285+
<div className="text-center">
286+
<h2 className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-glow">Community Partners</h2>
287+
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
288+
{partners.map((partner, index) => (
289+
<a
290+
key={index}
291+
href={partner.url}
292+
target="_blank"
293+
rel="noopener noreferrer"
294+
className="bg-alien-space-dark/80 backdrop-blur-md rounded-xl p-6 border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:transform hover:scale-105 group"
295+
>
296+
<div className="text-center">
297+
<h3 className="text-alien-gold font-semibold text-sm group-hover:text-alien-gold-light transition-colors font-[Exo]">
298+
{partner.name}
299+
</h3>
300+
</div>
301+
</a>
302+
))}
303+
</div>
304+
</div>
56305
</div>
57306
</main>
58-
59307
</div>
60308
);
61309
};

0 commit comments

Comments
 (0)