Skip to content

Commit 9283fa2

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

File tree

1 file changed

+119
-193
lines changed

1 file changed

+119
-193
lines changed

‎src/pages/Clubs.tsx‎

Lines changed: 119 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { motion } from "framer-motion";
32
import StarBackground from '@/components/StarBackground';
43
import Header from '@/components/Header';
54
import Footer from '@/components/Footer';
@@ -17,13 +16,7 @@ type ClubProps = {
1716
};
1817

1918
const ClubCard = ({ club }: { club: ClubProps }) => (
20-
<motion.div
21-
initial={{ opacity: 0, scale: 0.9 }}
22-
whileInView={{ opacity: 1, scale: 1 }}
23-
transition={{ duration: 0.6 }}
24-
viewport={{ once: true }}
25-
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`}
26-
>
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`}>
2720
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-alien-space-dark/60 to-alien-space-dark/90 z-0"></div>
2821

2922
<div className="relative z-10">
@@ -49,7 +42,7 @@ const ClubCard = ({ club }: { club: ClubProps }) => (
4942
</Button>
5043
</div>
5144
</div>
52-
</motion.div>
45+
</div>
5346
);
5447

5548
const Clubs: React.FC = () => {
@@ -172,215 +165,148 @@ const Clubs: React.FC = () => {
172165
];
173166

174167
return (
175-
<div className="w-full flex-col flex justify-center items-center bg-cover bg-center relative">
176-
{/* Fixed Background Image */}
177-
<img
178-
src="/lovable-uploads/ClubLogo.png"
179-
alt=""
180-
className="fixed top-0 -z-1 w-full h-full object-cover mt-20"
181-
/>
182-
168+
<div className="min-h-screen bg-alien-space relative">
183169
<StarBackground />
184170

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+
185184
{/* Overlay for better readability */}
186185
<div
187186
className="fixed inset-0 pointer-events-none bg-black/50 backdrop-blur-[0.5px]"
188187
style={{ zIndex: -20 }}
189188
/>
190189

191190
<Header />
192-
193-
<div className="max-w-7xl w-full flex flex-col justify-center md:items-start items-center gap-12 mt-40 px-4 relative z-10">
194-
<motion.h1
195-
className="font-[Titles] lg:text-[69px] md:text-[55px] text-[50px] text-[#B9954F] uppercase font-nasalization"
196-
initial={{ opacity: 0, x: -100 }}
197-
whileInView={{ opacity: 1, x: 0 }}
198-
transition={{ duration: 0.8 }}
199-
viewport={{ once: true }}
200-
>
201-
Clubs
202-
</motion.h1>
203-
204-
<motion.span
205-
className="md:w-[50%] w-full font-[Titles] md:text-[20px] text-[15px] text-[#B9954F] font-thin md:text-start text-center font-[Exo]"
206-
initial={{ opacity: 0, x: -100 }}
207-
whileInView={{ opacity: 1, x: 0 }}
208-
transition={{ duration: 0.8 }}
209-
viewport={{ once: true }}
210-
>
211-
Enjoy the Advantages: Benefit from exclusive, fully customizable and sustainable orders Airdrops, Events, Jewelry, Textiles, Tournaments, trips
212-
</motion.span>
213-
214-
<motion.button
215-
className="md:w-[50%] cursor-pointer w-full font-[Titles] md:text-[30px] text-[18px] text-[#ECDD91] py-3 bg-[#329415] rounded-full shadow-[inset_4px_4px_4px_0px_rgba(255,255,255,0.5),7px_7px_20px_0px_rgba(1,0,0,0.1),4px_4px_5px_0px_rgba(0,0,0,0.1)] font-[Exo]"
216-
initial={{ opacity: 0, x: -100 }}
217-
whileInView={{ opacity: 1, x: 0 }}
218-
transition={{ duration: 0.8 }}
219-
viewport={{ once: true }}
220-
>
221-
Contact
222-
</motion.button>
223-
224-
{/* Featured Clubs */}
225-
<div className="w-full mb-16">
226-
<motion.h2
227-
initial={{ opacity: 0, y: 30 }}
228-
whileInView={{ opacity: 1, y: 0 }}
229-
transition={{ duration: 0.8 }}
230-
viewport={{ once: true }}
231-
className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-center text-glow"
232-
>
233-
Featured Clubs
234-
</motion.h2>
235-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
236-
{featuredClubs.map((club, index) => (
237-
<ClubCard key={index} club={club} />
238-
))}
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>
239205
</div>
240-
</div>
241206

242-
{/* Club Activity */}
243-
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16 w-full">
244-
<div className="lg:col-span-2">
245-
<motion.h2
246-
initial={{ opacity: 0, y: 30 }}
247-
whileInView={{ opacity: 1, y: 0 }}
248-
transition={{ duration: 0.8 }}
249-
viewport={{ once: true }}
250-
className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-glow"
251-
>
252-
All Clubs
253-
</motion.h2>
254-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
255-
{allClubs.map((club, index) => (
256-
<ClubCard key={`all-${index}`} club={club} />
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} />
257213
))}
258214
</div>
259215
</div>
260-
261-
<div className="space-y-8">
262-
<motion.div
263-
initial={{ opacity: 0, x: 50 }}
264-
whileInView={{ opacity: 1, x: 0 }}
265-
transition={{ duration: 0.8 }}
266-
viewport={{ once: true }}
267-
>
268-
<h2 className="text-2xl font-bold text-alien-gold mb-6 font-nasalization">Upcoming Events</h2>
269-
<div className="space-y-4">
270-
{upcomingEvents.map((event, index) => (
271-
<motion.div
272-
key={index}
273-
initial={{ opacity: 0, y: 20 }}
274-
whileInView={{ opacity: 1, y: 0 }}
275-
transition={{ duration: 0.6, delay: index * 0.1 }}
276-
viewport={{ once: true }}
277-
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"
278-
>
279-
<div className="flex items-start gap-4">
280-
<div className="p-3 bg-alien-space-light/60 rounded-full border border-alien-gold/30">
281-
<Calendar className="h-5 w-5 text-alien-gold" />
282-
</div>
283-
<div className="flex-1">
284-
<h4 className="font-semibold text-alien-gold font-[Exo] mb-1">{event.title}</h4>
285-
<p className="text-sm text-gray-300 font-[Exo] mb-2">{event.club}</p>
286-
<div className="flex items-center text-xs text-alien-green">
287-
<Calendar className="h-3 w-3 mr-1" />
288-
<span>{event.date} · {event.time}</span>
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>
289245
</div>
290246
</div>
291247
</div>
292-
</motion.div>
293-
))}
294-
295-
<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">
296-
View All Events
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
297264
</Button>
298265
</div>
299-
</motion.div>
300-
301-
{/* Create Club CTA */}
302-
<motion.div
303-
initial={{ opacity: 0, scale: 0.9 }}
304-
whileInView={{ opacity: 1, scale: 1 }}
305-
transition={{ duration: 0.8 }}
306-
viewport={{ once: true }}
307-
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"
308-
>
309-
<h3 className="text-xl font-bold text-alien-gold mb-4 font-nasalization text-glow">Start Your Own Club</h3>
310-
<p className="text-sm text-gray-200 mb-6 font-[Exo] leading-relaxed">
311-
Have a unique interest not represented yet? Create your own club and invite others to join.
312-
</p>
313-
<Button className="w-full bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-[Exo] font-semibold">
314-
Create Club
315-
</Button>
316-
</motion.div>
266+
</div>
317267
</div>
318-
</div>
319268

320-
{/* Community Stats */}
321-
<motion.div
322-
initial={{ opacity: 0, y: 50 }}
323-
whileInView={{ opacity: 1, y: 0 }}
324-
transition={{ duration: 0.8 }}
325-
viewport={{ once: true }}
326-
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16 w-full"
327-
>
328-
{[
329-
{ value: "15+", label: "Active Clubs" },
330-
{ value: "28.5K", label: "Members" },
331-
{ value: "450+", label: "Events Held" },
332-
{ value: "142", label: "Countries" }
333-
].map((stat, index) => (
334-
<motion.div
335-
key={index}
336-
initial={{ opacity: 0, scale: 0.8 }}
337-
whileInView={{ opacity: 1, scale: 1 }}
338-
transition={{ duration: 0.6, delay: index * 0.1 }}
339-
viewport={{ once: true }}
340-
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"
341-
>
342-
<p className="text-4xl font-bold text-alien-gold mb-2 font-nasalization text-glow">{stat.value}</p>
343-
<p className="text-sm text-gray-300 font-[Exo]">{stat.label}</p>
344-
</motion.div>
345-
))}
346-
</motion.div>
347-
348-
{/* Partners Section */}
349-
<motion.div
350-
initial={{ opacity: 0, y: 50 }}
351-
whileInView={{ opacity: 1, y: 0 }}
352-
transition={{ duration: 0.8 }}
353-
viewport={{ once: true }}
354-
className="text-center w-full mb-16"
355-
>
356-
<h2 className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-glow">Community Partners</h2>
357-
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
358-
{partners.map((partner, index) => (
359-
<motion.a
360-
key={index}
361-
initial={{ opacity: 0, scale: 0.8 }}
362-
whileInView={{ opacity: 1, scale: 1 }}
363-
transition={{ duration: 0.6, delay: index * 0.1 }}
364-
viewport={{ once: true }}
365-
href={partner.url}
366-
target="_blank"
367-
rel="noopener noreferrer"
368-
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"
369-
>
370-
<div className="text-center">
371-
<h3 className="text-alien-gold font-semibold text-sm group-hover:text-alien-gold-light transition-colors font-[Exo]">
372-
{partner.name}
373-
</h3>
374-
</div>
375-
</motion.a>
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>
280+
</div>
376281
))}
377282
</div>
378-
</motion.div>
379-
</div>
380-
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>
305+
</div>
306+
</main>
381307
<Footer />
382308
</div>
383309
);
384310
};
385311

386-
export default Clubs;
312+
export default Clubs;

0 commit comments

Comments
 (0)