Skip to content

Commit 3316855

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Update clubs and featured sections
1 parent e6441fa commit 3316855

File tree

10 files changed

+546
-15
lines changed

10 files changed

+546
-15
lines changed

‎public/lovable-uploads/eco-baseball-cap.png‎

1.14 MB
Loading

‎public/lovable-uploads/eco-bucket-hat.png‎

1.06 MB
Loading

‎public/lovable-uploads/eco-dad-hat.png‎

1.73 MB
Loading

‎public/lovable-uploads/eco-earrings.jpg‎

80.6 KB
Loading

‎public/lovable-uploads/eco-hat-navy.png‎

2.73 MB
Loading

‎public/lovable-uploads/eco-hat-orange.png‎

1.56 MB
Loading

‎public/lovable-uploads/eco-snapback.png‎

1.11 MB
Loading

‎src/components/EcoProductCarousel.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React, { useState, useEffect } from 'react';
2+
import { ChevronLeft, ChevronRight } from 'lucide-react';
3+
4+
interface EcoProduct {
5+
name: string;
6+
image: string;
7+
description: string;
8+
}
9+
10+
const EcoProductCarousel = () => {
11+
const [currentIndex, setCurrentIndex] = useState(0);
12+
13+
const products: EcoProduct[] = [
14+
{
15+
name: "Cannabis Leaf Earrings",
16+
image: "/lovable-uploads/eco-earrings.jpg",
17+
description: "Sterling silver hexagon earrings with 24k gold cannabis leaf design"
18+
},
19+
{
20+
name: "Orange Eco Trucker Hat",
21+
image: "/lovable-uploads/eco-hat-orange.png",
22+
description: "Sustainable trucker hat with embroidered alien cannabis logo"
23+
},
24+
{
25+
name: "Navy Alien Hat",
26+
image: "/lovable-uploads/eco-hat-navy.png",
27+
description: "Premium navy trucker hat with golden alien symbol"
28+
},
29+
{
30+
name: "Organic Bucket Hat",
31+
image: "/lovable-uploads/eco-bucket-hat.png",
32+
description: "100% organic cotton bucket hat with eco-friendly design"
33+
},
34+
{
35+
name: "Organic Baseball Cap",
36+
image: "/lovable-uploads/eco-baseball-cap.png",
37+
description: "Sustainable baseball cap with embroidered alien logo"
38+
},
39+
{
40+
name: "Classic Snapback",
41+
image: "/lovable-uploads/eco-snapback.png",
42+
description: "Black and teal snapback with geometric alien symbol"
43+
},
44+
{
45+
name: "Camo Dad Hat",
46+
image: "/lovable-uploads/eco-dad-hat.png",
47+
description: "Green camo dad hat with cannabis leaf embroidery"
48+
}
49+
];
50+
51+
useEffect(() => {
52+
const interval = setInterval(() => {
53+
setCurrentIndex((prevIndex) => (prevIndex + 1) % products.length);
54+
}, 3000);
55+
56+
return () => clearInterval(interval);
57+
}, [products.length]);
58+
59+
const nextProduct = () => {
60+
setCurrentIndex((prevIndex) => (prevIndex + 1) % products.length);
61+
};
62+
63+
const prevProduct = () => {
64+
setCurrentIndex((prevIndex) => (prevIndex - 1 + products.length) % products.length);
65+
};
66+
67+
return (
68+
<div className="relative w-full h-40 bg-alien-space-dark/60 rounded-lg overflow-hidden backdrop-blur-sm border border-alien-gold/20">
69+
<div className="absolute inset-0 flex items-center justify-center">
70+
<div className="flex items-center space-x-4">
71+
<button
72+
onClick={prevProduct}
73+
className="p-2 bg-alien-space-dark/80 rounded-full border border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-300"
74+
>
75+
<ChevronLeft className="h-4 w-4 text-alien-gold" />
76+
</button>
77+
78+
<div className="flex items-center space-x-4">
79+
<div className="w-20 h-20 rounded-lg overflow-hidden border border-alien-gold/30">
80+
<img
81+
src={products[currentIndex].image}
82+
alt={products[currentIndex].name}
83+
className="w-full h-full object-cover"
84+
/>
85+
</div>
86+
87+
<div className="max-w-48">
88+
<h4 className="text-sm font-semibold text-alien-gold font-[Exo] mb-1">
89+
{products[currentIndex].name}
90+
</h4>
91+
<p className="text-xs text-gray-300 font-[Exo] leading-relaxed">
92+
{products[currentIndex].description}
93+
</p>
94+
</div>
95+
</div>
96+
97+
<button
98+
onClick={nextProduct}
99+
className="p-2 bg-alien-space-dark/80 rounded-full border border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-300"
100+
>
101+
<ChevronRight className="h-4 w-4 text-alien-gold" />
102+
</button>
103+
</div>
104+
</div>
105+
106+
{/* Indicators */}
107+
<div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-1">
108+
{products.map((_, index) => (
109+
<button
110+
key={index}
111+
onClick={() => setCurrentIndex(index)}
112+
className={`w-2 h-2 rounded-full transition-all duration-300 ${
113+
index === currentIndex ? 'bg-alien-gold' : 'bg-alien-gold/30'
114+
}`}
115+
/>
116+
))}
117+
</div>
118+
</div>
119+
);
120+
};
121+
122+
export default EcoProductCarousel;

‎src/components/FeaturedClubCard.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React from 'react';
2+
import { Button } from '@/components/ui/button';
3+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
4+
import { ExternalLink, Users, Gamepad2, Leaf, DollarSign, Music, Shield, Zap } from 'lucide-react';
5+
6+
interface PlatformLink {
7+
name: string;
8+
url?: string;
9+
icon?: string;
10+
description?: string;
11+
}
12+
13+
interface ClubSection {
14+
title: string;
15+
description: string;
16+
platforms: PlatformLink[];
17+
color: string;
18+
icon: React.ReactNode;
19+
}
20+
21+
interface FeaturedClubProps {
22+
name: string;
23+
description: string;
24+
members: number;
25+
icon: React.ReactNode;
26+
category: string;
27+
categoryColor: string;
28+
bgColor: string;
29+
sections?: ClubSection[];
30+
}
31+
32+
const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
33+
if (!club.sections) {
34+
// Render simple card for clubs without sections
35+
return (
36+
<div
37+
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`}
38+
>
39+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-alien-space-dark/60 to-alien-space-dark/90 z-0"></div>
40+
41+
<div className="relative z-10">
42+
<div className="flex justify-between items-start mb-6">
43+
<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">
44+
{club.icon}
45+
</div>
46+
<span
47+
className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm`}
48+
>
49+
{club.category}
50+
</span>
51+
</div>
52+
53+
<h3 className="text-xl font-bold text-alien-gold mb-3 font-nasalization group-hover:text-alien-gold-light transition-colors">
54+
{club.name}
55+
</h3>
56+
<p className="text-gray-200 mb-6 text-sm font-[Exo] leading-relaxed">
57+
{club.description}
58+
</p>
59+
60+
<div className="flex justify-between items-center">
61+
<div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm">
62+
<Users className="h-4 w-4 text-alien-green mr-2" />
63+
<span className="text-sm text-alien-green font-medium">
64+
{club.members.toLocaleString()} members
65+
</span>
66+
</div>
67+
<Button
68+
variant="outline"
69+
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"
70+
>
71+
Join Club
72+
</Button>
73+
</div>
74+
</div>
75+
</div>
76+
);
77+
}
78+
79+
// Render advanced card with sections
80+
return (
81+
<div className={`${club.bgColor} p-6 rounded-xl backdrop-blur-md overflow-hidden relative group transition-all duration-300 border border-alien-gold/20 hover:border-alien-gold/40`}>
82+
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-alien-space-dark/60 to-alien-space-dark/90 z-0"></div>
83+
84+
<div className="relative z-10">
85+
{/* Header */}
86+
<div className="flex justify-between items-start mb-6">
87+
<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">
88+
{club.icon}
89+
</div>
90+
<span className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm`}>
91+
{club.category}
92+
</span>
93+
</div>
94+
95+
<h3 className="text-xl font-bold text-alien-gold mb-3 font-nasalization group-hover:text-alien-gold-light transition-colors">
96+
{club.name}
97+
</h3>
98+
<p className="text-gray-200 mb-6 text-sm font-[Exo] leading-relaxed">
99+
{club.description}
100+
</p>
101+
102+
{/* Sections */}
103+
<div className="space-y-4 mb-6">
104+
{club.sections.map((section, index) => (
105+
<Card key={index} className="bg-alien-space-dark/60 border-alien-gold/20 backdrop-blur-sm">
106+
<CardHeader className="pb-3">
107+
<CardTitle className="flex items-center text-alien-gold text-sm font-nasalization">
108+
{section.icon}
109+
<span className="ml-2">{section.title}</span>
110+
</CardTitle>
111+
<CardDescription className="text-xs text-gray-300 font-[Exo]">
112+
{section.description}
113+
</CardDescription>
114+
</CardHeader>
115+
<CardContent className="pt-0">
116+
<div className="grid grid-cols-2 gap-2">
117+
{section.platforms.map((platform, pIndex) => (
118+
<Button
119+
key={pIndex}
120+
variant="ghost"
121+
size="sm"
122+
className={`${section.color} text-white hover:bg-white/20 text-xs h-8 justify-start font-[Exo]`}
123+
onClick={() => platform.url && window.open(platform.url, '_blank')}
124+
disabled={!platform.url}
125+
>
126+
<ExternalLink className="h-3 w-3 mr-1" />
127+
{platform.name}
128+
</Button>
129+
))}
130+
</div>
131+
</CardContent>
132+
</Card>
133+
))}
134+
</div>
135+
136+
{/* Footer */}
137+
<div className="flex justify-between items-center">
138+
<div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm">
139+
<Users className="h-4 w-4 text-alien-green mr-2" />
140+
<span className="text-sm text-alien-green font-medium">
141+
{club.members.toLocaleString()} members
142+
</span>
143+
</div>
144+
<Button
145+
variant="outline"
146+
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"
147+
>
148+
Join Club
149+
</Button>
150+
</div>
151+
</div>
152+
</div>
153+
);
154+
};
155+
156+
export default FeaturedClubCard;

0 commit comments

Comments
 (0)