Skip to content

Commit ac3c62a

Browse files
Alien69FlowAlien69Flow
authored
Update ParticipationSection.tsx
Signed-off-by: Aitor Alien <[email protected]>
1 parent ec023e1 commit ac3c62a

File tree

1 file changed

+64
-69
lines changed

1 file changed

+64
-69
lines changed

‎src/components/ParticipationSection.tsx‎

Lines changed: 64 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,24 @@ import { motion } from 'framer-motion';
33
import { Button } from '@/components/ui/button';
44
import { CircleDollarSign, Calendar, MessagesSquare, Users, ShieldCheck, Database, Coins } from 'lucide-react';
55

6+
const features = [
7+
{
8+
icon: <CircleDollarSign className="h-6 w-6 text-alien-gold" />,
9+
title: "Token Governance",
10+
description: "Hold A₿TC cryptokens to participate in voting and proposal creation across all ecosystem domains.",
11+
},
12+
{
13+
icon: <Calendar className="h-6 w-6 text-alien-green" />,
14+
title: "Regular Assemblies",
15+
description: "Join weekly virtual assemblies to discuss proposals and future directions.",
16+
},
17+
{
18+
icon: <MessagesSquare className="h-6 w-6 text-alien-gold" />,
19+
title: "Community Forums",
20+
description: "Contribute to ongoing discussions and knowledge sharing in our decentralized forums.",
21+
},
22+
];
23+
624
const stats = [
725
{
826
icon: <Users className="h-8 w-8" />,
@@ -33,78 +51,55 @@ const stats = [
3351
const ParticipationSection = () => {
3452
return (
3553
<section id="participate" className="py-20 relative">
36-
<div className="container mx-auto px-4">
37-
{/* Layout principal: ya NO hay lg:w-1/2 */}
38-
<div className="flex flex-col lg:flex-row gap-12 items-center">
39-
{/* Image side */}
40-
<motion.div
41-
className="w-full"
42-
initial={{ opacity: 0, x: -30 }}
43-
whileInView={{ opacity: 1, x: 0 }}
44-
transition={{ duration: 0.8 }}
45-
viewport={{ once: true }}
46-
>
47-
<div className="relative">
48-
{/* Floating indicators */}
49-
</div>
50-
</motion.div>
51-
{/* Content side */}
52-
<motion.div
53-
className="w-full"
54-
initial={{ opacity: 0, x: 30 }}
55-
whileInView={{ opacity: 1, x: 0 }}
56-
transition={{ duration: 0.8 }}
57-
viewport={{ once: true }}
58-
>
59-
<h2 className="text-4xl font-bold mb-6 text-alien-gold text-glow font-nasalization">
60-
Join the Cosmic Governance
61-
</h2>
62-
<p className="text-xl text-gray-300 mb-8">
63-
ΔlieπFlΦw $pac€ DAO operates on a principle of transparent, decentralized governance where all participants have the opportunity to shape the future of our interplanetary ecosystem.
64-
</p>
65-
<div className="space-y-6 mb-8">
66-
<div className="flex items-start gap-4">
67-
<div className="bg-alien-space-light p-3 rounded-full">
68-
<CircleDollarSign className="h-6 w-6 text-alien-gold" />
69-
</div>
70-
<div>
71-
<h3 className="text-xl font-semibold text-alien-gold-light font-nasalization">Token Governance</h3>
72-
<p className="text-gray-300">
73-
Hold A₿TC cryptokens to participate in voting and proposal creation across all ecosystem domains.
74-
</p>
75-
</div>
54+
<div className="container mx-auto px-4 flex flex-col items-center text-center">
55+
{/* Título */}
56+
<motion.h2
57+
className="text-4xl font-bold mb-6 text-alien-gold text-glow font-nasalization"
58+
initial={{ opacity: 0, y: -30 }}
59+
whileInView={{ opacity: 1, y: 0 }}
60+
transition={{ duration: 0.8 }}
61+
viewport={{ once: true }}
62+
>
63+
Join the Cosmic Governance
64+
</motion.h2>
65+
{/* Descripción */}
66+
<motion.p
67+
className="text-xl text-gray-300 mb-8 max-w-2xl"
68+
initial={{ opacity: 0 }}
69+
whileInView={{ opacity: 1 }}
70+
transition={{ delay: 0.2, duration: 0.8 }}
71+
viewport={{ once: true }}
72+
>
73+
ΔlieπFlΦw $pac€ DAO operates on a principle of transparent, decentralized governance where all participants have the opportunity to shape the future of our interplanetary ecosystem.
74+
</motion.p>
75+
{/* Features */}
76+
<div className="space-y-6 mb-8 w-full max-w-2xl">
77+
{features.map((feature, i) => (
78+
<motion.div
79+
key={feature.title}
80+
className="flex flex-col sm:flex-row items-center justify-center gap-4 text-left sm:text-left"
81+
initial={{ opacity: 0, x: -30 }}
82+
whileInView={{ opacity: 1, x: 0 }}
83+
transition={{ delay: 0.3 + i * 0.1, duration: 0.7 }}
84+
viewport={{ once: true }}
85+
>
86+
<div className="bg-alien-space-light p-3 rounded-full mb-2 sm:mb-0">
87+
{feature.icon}
7688
</div>
77-
<div className="flex items-start gap-4">
78-
<div className="bg-alien-space-light p-3 rounded-full">
79-
<Calendar className="h-6 w-6 text-alien-green" />
80-
</div>
81-
<div>
82-
<h3 className="text-xl font-semibold text-alien-gold-light font-nasalization">Regular Assemblies</h3>
83-
<p className="text-gray-300">
84-
Join weekly virtual assemblies to discuss proposals and future directions.
85-
</p>
86-
</div>
87-
</div>
88-
<div className="flex items-start gap-4">
89-
<div className="bg-alien-space-light p-3 rounded-full">
90-
<MessagesSquare className="h-6 w-6 text-alien-gold" />
91-
</div>
92-
<div>
93-
<h3 className="text-xl font-semibold text-alien-gold-light font-nasalization">Community Forums</h3>
94-
<p className="text-gray-300">
95-
Contribute to ongoing discussions and knowledge sharing in our decentralized forums.
96-
</p>
97-
</div>
89+
<div>
90+
<h3 className="text-xl font-semibold text-alien-gold-light font-nasalization">{feature.title}</h3>
91+
<p className="text-gray-300">{feature.description}</p>
9892
</div>
99-
</div>
100-
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-medium px-8 py-6 text-lg rounded-full mb-12 font-nasalization">
101-
Connect & Participate
102-
</Button>
103-
</motion.div>
93+
</motion.div>
94+
))}
10495
</div>
105-
{/* Stats Grid - Centrado en toda la pantalla */}
106-
<div className="flex justify-center mt-12">
107-
<div className="grid grid-cols-2 gap-6 text-center max-w-xl w-full">
96+
{/* Botón */}
97+
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-medium px-8 py-6 text-lg rounded-full mb-12 font-nasalization">
98+
Connect & Participate
99+
</Button>
100+
{/* Stats Grid - SIEMPRE centrado */}
101+
<div className="flex justify-center mt-12 w-full">
102+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center max-w-3xl w-full">
108103
{stats.map((stat, index) => (
109104
<motion.div
110105
key={index}

0 commit comments

Comments
 (0)