Skip to content

Commit 3832e34

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Improve club and CoNetWorKing page design
1 parent 5278c9f commit 3832e34

File tree

3 files changed

+124
-118
lines changed

3 files changed

+124
-118
lines changed

‎src/components/FeaturedClubCard.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,13 +79,13 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
7979

8080
// Render advanced card with sections
8181
return (
82-
<div className={`${club.bgColor} p-4 sm: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 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-4 lg:gap-6 items-stretch">
86+
<div className="flex flex-col lg:flex-row gap-6 items-stretch">
8787
{/* Left sidebar with icon, meta and actions */}
88-
<aside className="w-full lg:w-64 lg:min-w-[16rem] bg-alien-space-dark/60 border border-alien-gold/20 rounded-lg p-4 backdrop-blur-sm flex flex-col justify-between">
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) ... */}
8989
<div>
9090
<div className="flex items-start justify-between lg:flex-col lg:items-start gap-3">
9191
<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">
@@ -119,23 +119,23 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
119119
</aside>
120120

121121
{/* Right content with sections */}
122-
<div className="flex-1">
123-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 lg:gap-4">
122+
<div className="flex-1 min-w-0">
123+
<div className="grid grid-cols-1 gap-4">
124124
{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-3 lg:p-4">
126-
<div className="flex items-center text-alien-gold text-xs lg:text-sm font-nasalization mb-2 lg:mb-3">
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">
127127
{section.icon}
128128
<span className="ml-2">{section.title}</span>
129129
</div>
130-
<p className="text-xs text-gray-300 font-[Exo] mb-3 lg:mb-4">{section.description}</p>
130+
<p className="text-sm text-gray-300 font-[Exo] mb-4">{section.description}</p>
131131

132132
{/* Special handling for EcoFlow product carousel */}
133133
{club.name === 'Δ EcoFlow' && section.title === 'Eco Products Catalog' ? (
134134
<div className="mt-4">
135135
<EcoProductCarousel />
136136
</div>
137137
) : (
138-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
138+
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
139139
{section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
140140
<Button
141141
key={pIndex}

‎src/pages/Clubs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,7 @@ const Clubs: React.FC = () => {
402402
<h2 className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-center text-glow">
403403
Featured Clubs
404404
</h2>
405-
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
405+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 max-w-7xl mx-auto">
406406
{[...featuredClubs].sort((a, b) => a.name.localeCompare(b.name)).map((club, index) => (
407407
<FeaturedClubCard key={index} club={club} />
408408
))}

‎src/pages/CoNetWorKing.tsx‎

Lines changed: 114 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ const CoNetWorKing: React.FC = () => {
5151
icon: <TrendingUp className="h-8 w-8 text-white" />,
5252
color: "bg-gradient-to-br from-blue-500 to-cyan-400"
5353
},
54+
{
55+
title: "Mining",
56+
description: "Participate in network security and earn rewards through proof-of-work and proof-of-stake mining operations.",
57+
icon: <Pickaxe className="h-8 w-8 text-white" />,
58+
color: "bg-gradient-to-br from-yellow-500 to-orange-400"
59+
},
5460
{
5561
title: "BioFi",
5662
description: "Revolutionize biotechnology funding through decentralized finance. Support and invest in groundbreaking biological research and medical innovations.",
@@ -255,34 +261,22 @@ const CoNetWorKing: React.FC = () => {
255261
<main className="container mx-auto px-4 pt-32 pb-16 relative z-20">
256262
<div className="max-w-7xl mx-auto">
257263
{/* Hero Section */}
258-
<div className="text-center mb-20">
264+
<div className="text-center mb-20 bg-alien-space-dark/80 backdrop-blur-md rounded-2xl p-12 border border-alien-gold/30">
259265
<div className="inline-flex items-center justify-center w-24 h-24 bg-alien-gold/20 rounded-full mb-6 border-2 border-alien-gold/40 backdrop-blur-md">
260266
<img
261267
src="/lovable-uploads/CoNetWorKingLogo.png"
262268
alt="CoNetWorKing Official Logo"
263269
className="h-16 w-16 object-contain"
264270
/>
265271
</div>
266-
<h1 className="text-5xl md:text-7xl font-bold text-alien-gold mb-8 font-[Atomic Age, Star Wars] text-glow">
272+
<h1 className="text-5xl md:text-7xl font-bold text-alien-gold mb-8 font-[Atomic Age, Star Wars] text-glow drop-shadow-[0_0_30px_rgba(255,215,0,0.5)]">
267273
CoNetWorKing
268274
</h1>
269-
<p className="text-2xl text-gray-200 max-w-4xl mx-auto font-[Exo] leading-relaxed">
275+
<p className="text-2xl text-white max-w-4xl mx-auto font-[Exo] leading-relaxed drop-shadow-[0_2px_10px_rgba(0,0,0,0.8)]">
270276
Connect with the future of decentralized finance through our comprehensive suite of blockchain services
271277
</p>
272278
</div>
273279

274-
{/* Services Grid */}
275-
<div className="mb-20">
276-
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
277-
Our Services
278-
</h2>
279-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
280-
{services.map((service, index) => (
281-
<ServiceCard key={index} service={service} />
282-
))}
283-
</div>
284-
</div>
285-
286280
{/* Real-time Network Stats with Bitcoin Widget */}
287281
<div className="mb-20">
288282
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
@@ -357,6 +351,111 @@ const CoNetWorKing: React.FC = () => {
357351
</div>
358352
</div>
359353

354+
{/* DAO Section */}
355+
<div className="mb-20">
356+
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
357+
Decentralized Autonomous Organization
358+
</h2>
359+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
360+
{/* Governance */}
361+
<Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300">
362+
<CardHeader>
363+
<div className="flex items-center gap-4 mb-4">
364+
<div className="p-3 bg-gradient-to-br from-purple-500 to-pink-400 rounded-full">
365+
<Shield className="h-8 w-8 text-white" />
366+
</div>
367+
<CardTitle className="text-alien-gold font-[Atomic Age] text-2xl">Governance</CardTitle>
368+
</div>
369+
</CardHeader>
370+
<CardContent>
371+
<CardDescription className="text-gray-300 font-[Exo] leading-relaxed mb-6">
372+
Participate in the democratic governance of AlienFlowSpace DAO. Every token holder has a voice in shaping the future of our ecosystem through transparent voting mechanisms.
373+
</CardDescription>
374+
<div className="space-y-3">
375+
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
376+
<Users className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
377+
<div>
378+
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Token-Based Voting</h4>
379+
<p className="text-gray-400 text-sm">One token, one vote - fully decentralized decision-making</p>
380+
</div>
381+
</div>
382+
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
383+
<Landmark className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
384+
<div>
385+
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Treasury Management</h4>
386+
<p className="text-gray-400 text-sm">Community controls allocation of DAO funds</p>
387+
</div>
388+
</div>
389+
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
390+
<Network className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
391+
<div>
392+
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">On-Chain Execution</h4>
393+
<p className="text-gray-400 text-sm">Smart contracts execute approved proposals automatically</p>
394+
</div>
395+
</div>
396+
</div>
397+
</CardContent>
398+
</Card>
399+
400+
{/* Proposals */}
401+
<Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300">
402+
<CardHeader>
403+
<div className="flex items-center gap-4 mb-4">
404+
<div className="p-3 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-full">
405+
<Zap className="h-8 w-8 text-white" />
406+
</div>
407+
<CardTitle className="text-alien-gold font-[Atomic Age] text-2xl">Proposals</CardTitle>
408+
</div>
409+
</CardHeader>
410+
<CardContent>
411+
<CardDescription className="text-gray-300 font-[Exo] leading-relaxed mb-6">
412+
Submit and vote on proposals that drive the evolution of our ecosystem. From protocol upgrades to community initiatives, your voice matters.
413+
</CardDescription>
414+
<div className="space-y-3">
415+
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
416+
<TrendingUp className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
417+
<div>
418+
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Protocol Upgrades</h4>
419+
<p className="text-gray-400 text-sm">Propose improvements to smart contracts and features</p>
420+
</div>
421+
</div>
422+
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
423+
<Coins className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
424+
<div>
425+
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Funding Requests</h4>
426+
<p className="text-gray-400 text-sm">Request DAO funding for community projects</p>
427+
</div>
428+
</div>
429+
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
430+
<Globe className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
431+
<div>
432+
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Partnership Proposals</h4>
433+
<p className="text-gray-400 text-sm">Suggest strategic collaborations and integrations</p>
434+
</div>
435+
</div>
436+
</div>
437+
<div className="mt-6">
438+
<Button className="w-full bg-alien-gold hover:bg-alien-gold/90 text-alien-space-dark font-[Exo]">
439+
View Active Proposals
440+
</Button>
441+
</div>
442+
</CardContent>
443+
</Card>
444+
</div>
445+
</div>
446+
447+
{/* Services Grid */}
448+
<div className="mb-20">
449+
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
450+
DAO | DAPP | DEX
451+
</h2>
452+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
453+
{services.map((service, index) => (
454+
<ServiceCard key={index} service={service} />
455+
))}
456+
</div>
457+
</div>
458+
360459
{/* Partners Section */}
361460
<div className="mb-20">
362461
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
@@ -464,99 +563,6 @@ const CoNetWorKing: React.FC = () => {
464563
</div>
465564
</div>
466565
</div>
467-
468-
{/* DAO Section */}
469-
<div className="mb-20">
470-
<h2 className="text-3xl font-bold text-alien-gold mb-12 text-center font-[Atomic Age]">
471-
Decentralized Autonomous Organization
472-
</h2>
473-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
474-
{/* Governance */}
475-
<Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300">
476-
<CardHeader>
477-
<div className="flex items-center gap-4 mb-4">
478-
<div className="p-3 bg-gradient-to-br from-purple-500 to-pink-400 rounded-full">
479-
<Shield className="h-8 w-8 text-white" />
480-
</div>
481-
<CardTitle className="text-alien-gold font-[Atomic Age] text-2xl">Governance</CardTitle>
482-
</div>
483-
</CardHeader>
484-
<CardContent>
485-
<CardDescription className="text-gray-300 font-[Exo] leading-relaxed mb-6">
486-
Participate in the democratic governance of AlienFlowSpace DAO. Every token holder has a voice in shaping the future of our ecosystem through transparent voting mechanisms.
487-
</CardDescription>
488-
<div className="space-y-3">
489-
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
490-
<Users className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
491-
<div>
492-
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Token-Based Voting</h4>
493-
<p className="text-gray-400 text-sm">One token, one vote - fully decentralized decision-making</p>
494-
</div>
495-
</div>
496-
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
497-
<Landmark className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
498-
<div>
499-
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Treasury Management</h4>
500-
<p className="text-gray-400 text-sm">Community controls allocation of DAO funds</p>
501-
</div>
502-
</div>
503-
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
504-
<Network className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
505-
<div>
506-
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">On-Chain Execution</h4>
507-
<p className="text-gray-400 text-sm">Smart contracts execute approved proposals automatically</p>
508-
</div>
509-
</div>
510-
</div>
511-
</CardContent>
512-
</Card>
513-
514-
{/* Proposals */}
515-
<Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300">
516-
<CardHeader>
517-
<div className="flex items-center gap-4 mb-4">
518-
<div className="p-3 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-full">
519-
<Zap className="h-8 w-8 text-white" />
520-
</div>
521-
<CardTitle className="text-alien-gold font-[Atomic Age] text-2xl">Proposals</CardTitle>
522-
</div>
523-
</CardHeader>
524-
<CardContent>
525-
<CardDescription className="text-gray-300 font-[Exo] leading-relaxed mb-6">
526-
Submit and vote on proposals that drive the evolution of our ecosystem. From protocol upgrades to community initiatives, your voice matters.
527-
</CardDescription>
528-
<div className="space-y-3">
529-
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
530-
<TrendingUp className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
531-
<div>
532-
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Protocol Upgrades</h4>
533-
<p className="text-gray-400 text-sm">Propose improvements to smart contracts and features</p>
534-
</div>
535-
</div>
536-
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
537-
<Coins className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
538-
<div>
539-
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Funding Requests</h4>
540-
<p className="text-gray-400 text-sm">Request DAO funding for community projects</p>
541-
</div>
542-
</div>
543-
<div className="flex items-start gap-3 p-3 bg-alien-space-light/20 rounded-lg">
544-
<Globe className="h-5 w-5 text-alien-green flex-shrink-0 mt-1" />
545-
<div>
546-
<h4 className="text-alien-gold font-[Exo] font-semibold mb-1">Partnership Proposals</h4>
547-
<p className="text-gray-400 text-sm">Suggest strategic collaborations and integrations</p>
548-
</div>
549-
</div>
550-
</div>
551-
<div className="mt-6">
552-
<Button className="w-full bg-alien-gold hover:bg-alien-gold/90 text-alien-space-dark font-[Exo]">
553-
View Active Proposals
554-
</Button>
555-
</div>
556-
</CardContent>
557-
</Card>
558-
</div>
559-
</div>
560566

561567
{/* CTA Section */}
562568
<div className="bg-gradient-to-r from-alien-green/20 to-alien-gold/20 rounded-xl p-12 text-center backdrop-blur-md border border-alien-gold/30">

0 commit comments

Comments
 (0)