Skip to content

Commit 376a704

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor clubs and CoNetWorKing pages
1 parent 6c61078 commit 376a704

File tree

2 files changed

+211
-143
lines changed

2 files changed

+211
-143
lines changed

‎src/components/FeaturedClubCard.tsx‎

Lines changed: 70 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -77,85 +77,88 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
7777
);
7878
}
7979

80-
// Render advanced card with sections
80+
// Render advanced card with sections - all horizontal layout
8181
return (
82-
<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={`${club.bgColor} p-6 lg:p-8 rounded-xl backdrop-blur-md overflow-hidden relative group transition-all duration-300 border border-alien-gold/20 hover:border-alien-gold/40`}>
8383
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-alien-space-dark/60 to-alien-space-dark/90 z-0"></div>
8484

8585
<div className="relative z-10">
86-
<div className="flex flex-col lg:flex-row gap-6 items-stretch">
87-
{/* Left sidebar with icon, meta and actions */}
88-
<aside className="w-full lg:w-72 lg:min-w-[18rem] bg-alien-space-dark/60 border border-alien-gold/20 rounded-lg p-5 backdrop-blur-sm flex flex-col justify-between">{/* ... keep existing code (sidebar content) ... */}
89-
<div>
90-
<div className="flex items-start justify-between lg:flex-col lg:items-start gap-3">
91-
<div className="p-3 lg:p-4 bg-alien-space-dark/80 rounded-xl border border-alien-gold/30 group-hover:border-alien-gold/50 transition-all duration-300 inline-block">
92-
{club.icon}
86+
{/* Header section - horizontal layout */}
87+
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8 pb-6 border-b border-alien-gold/20">
88+
{/* Left: Icon, Name, Description */}
89+
<div className="flex-1 flex flex-col sm:flex-row gap-6">
90+
<div className="flex items-start gap-4">
91+
<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 flex-shrink-0">
92+
{club.icon}
93+
</div>
94+
<div className="flex-1 min-w-0">
95+
<div className="flex items-center gap-3 mb-3">
96+
<h3 className="text-xl lg:text-2xl font-bold text-alien-gold font-nasalization group-hover:text-alien-gold-light transition-colors">
97+
{club.name}
98+
</h3>
99+
<span className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm flex-shrink-0`}>
100+
{club.category}
101+
</span>
93102
</div>
94-
<span className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm h-fit`}>
95-
{club.category}
96-
</span>
103+
<p className="text-gray-200 text-sm lg:text-base font-[Exo] leading-relaxed">
104+
{club.description}
105+
</p>
97106
</div>
98-
<h3 className="mt-4 text-lg lg:text-xl font-bold text-alien-gold font-nasalization group-hover:text-alien-gold-light transition-colors">
99-
{club.name}
100-
</h3>
101-
<p className="text-gray-200 mt-2 text-xs lg:text-sm font-[Exo] leading-relaxed">
102-
{club.description}
103-
</p>
104107
</div>
105-
<div className="mt-4 space-y-3">
106-
<div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm">
107-
<Users className="h-4 w-4 text-alien-green mr-2" />
108-
<span className="text-sm text-alien-green font-medium">
109-
{club.members.toLocaleString()} members
110-
</span>
111-
</div>
112-
<Button
113-
variant="outline"
114-
className="w-full 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"
115-
>
116-
Join Club
117-
</Button>
108+
</div>
109+
110+
{/* Right: Members and Join button */}
111+
<div className="flex flex-row lg:flex-col gap-3 lg:items-end flex-shrink-0">
112+
<div className="flex items-center bg-alien-space-dark/60 px-4 py-2 rounded-full backdrop-blur-sm border border-alien-gold/20">
113+
<Users className="h-4 w-4 text-alien-green mr-2" />
114+
<span className="text-sm text-alien-green font-medium whitespace-nowrap">
115+
{club.members.toLocaleString()} members
116+
</span>
118117
</div>
119-
</aside>
118+
<Button
119+
variant="outline"
120+
className="border-alien-gold/50 text-alien-gold hover:bg-alien-gold/20 hover:border-alien-gold text-sm px-6 py-2 h-auto font-[Exo] font-medium backdrop-blur-sm whitespace-nowrap"
121+
>
122+
Join Club
123+
</Button>
124+
</div>
125+
</div>
120126

121-
{/* Right content with sections */}
122-
<div className="flex-1 min-w-0">
123-
<div className="grid grid-cols-1 gap-4">
124-
{club.sections.map((section, index) => (
125-
<div key={index} className="bg-alien-space-dark/60 border border-alien-gold/20 backdrop-blur-sm rounded-lg p-5">{/* ... keep existing code (section content) ... */}
126-
<div className="flex items-center text-alien-gold text-sm font-nasalization mb-3">
127-
{section.icon}
128-
<span className="ml-2">{section.title}</span>
129-
</div>
130-
<p className="text-sm text-gray-300 font-[Exo] mb-4">{section.description}</p>
127+
{/* Sections - horizontal grid layout */}
128+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
129+
{club.sections.map((section, index) => (
130+
<div key={index} className="bg-alien-space-dark/60 border border-alien-gold/20 backdrop-blur-sm rounded-lg p-5 hover:border-alien-gold/40 transition-all duration-300">
131+
<div className="flex items-center text-alien-gold text-sm font-nasalization mb-3">
132+
{section.icon}
133+
<span className="ml-2">{section.title}</span>
134+
</div>
135+
<p className="text-sm text-gray-300 font-[Exo] mb-4">{section.description}</p>
131136

132-
{/* Special handling for EcoFlow product carousel */}
133-
{club.name === 'Δ EcoFlow' && section.title === 'Eco Products Catalog' ? (
134-
<div className="mt-4">
135-
<EcoProductCarousel />
136-
</div>
137-
) : (
138-
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
139-
{section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
140-
<Button
141-
key={pIndex}
142-
variant="ghost"
143-
size="sm"
144-
className={`${section.color} text-white hover:bg-white/20 text-xs h-auto py-2 justify-start font-[Exo] w-full`}
145-
onClick={() => platform.url && window.open(platform.url, '_blank')}
146-
disabled={!platform.url}
147-
>
148-
{platform.icon && <img src={platform.icon} alt={platform.name} className="h-4 w-4 mr-2 flex-shrink-0 rounded" />}
149-
{!platform.icon && <ExternalLink className="h-4 w-4 mr-2 flex-shrink-0" />}
150-
<span className="truncate text-left">{platform.name}</span>
151-
</Button>
152-
))}
153-
</div>
154-
)}
137+
{/* Special handling for EcoFlow product carousel */}
138+
{club.name === 'Δ EcoFlow' && section.title === 'Eco Products Catalog' ? (
139+
<div className="mt-4">
140+
<EcoProductCarousel />
155141
</div>
156-
))}
142+
) : (
143+
<div className="grid grid-cols-2 gap-2">
144+
{section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
145+
<Button
146+
key={pIndex}
147+
variant="ghost"
148+
size="sm"
149+
className={`${section.color} text-white hover:bg-white/20 text-xs h-auto py-2 justify-start font-[Exo] w-full`}
150+
onClick={() => platform.url && window.open(platform.url, '_blank')}
151+
disabled={!platform.url}
152+
>
153+
{platform.icon && <img src={platform.icon} alt={platform.name} className="h-4 w-4 mr-2 flex-shrink-0 rounded" />}
154+
{!platform.icon && <ExternalLink className="h-4 w-4 mr-2 flex-shrink-0" />}
155+
<span className="truncate text-left">{platform.name}</span>
156+
</Button>
157+
))}
158+
</div>
159+
)}
157160
</div>
158-
</div>
161+
))}
159162
</div>
160163
</div>
161164
</div>

0 commit comments

Comments
 (0)