Skip to content

Commit bd76bfa

Browse files
lovable-dev[bot]Alien69Flow
lovable-dev[bot]
and
Alien69Flow
committed
Refactor homepage UI
Co-authored-by: Alien69Flow <111972684+Alien69Flow@users.noreply.github.com>
1 parent 57e11f4 commit bd76bfa

6 files changed

Lines changed: 125 additions & 90 deletions

File tree

‎src/components/EcosystemSection.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,25 @@ const EcosystemSection = () => {
103103
<p className="max-w-3xl mx-auto font-bold text-alien-gold text-[alien-gold-dark]">ΔlieπFlΦw $pac€ bridges diverse decentralized domains into a coherent, interoperable ecosystem.</p>
104104
</motion.div>
105105

106-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
107-
{ecosystems.map((ecosystem, index) => <EcosystemCard key={ecosystem.id} ecosystem={ecosystem} index={index} />)}
106+
{/* Connected nodes visual */}
107+
<div className="relative">
108+
{/* SVG connection lines (desktop only) */}
109+
<svg className="absolute inset-0 w-full h-full pointer-events-none hidden xl:block" style={{ zIndex: 0 }}>
110+
<defs>
111+
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
112+
<stop offset="0%" stopColor="hsl(142 67% 45% / 0.15)" />
113+
<stop offset="50%" stopColor="hsl(48 83% 72% / 0.2)" />
114+
<stop offset="100%" stopColor="hsl(142 67% 45% / 0.15)" />
115+
</linearGradient>
116+
</defs>
117+
{/* Horizontal lines connecting columns */}
118+
{[0, 1, 2, 3].map(i => (
119+
<line key={`h-${i}`} x1={`${10 + i * 20}%`} y1="50%" x2={`${30 + i * 20}%`} y2="50%" stroke="url(#lineGrad)" strokeWidth="1" strokeDasharray="6 4" />
120+
))}
121+
</svg>
122+
<div className="relative z-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
123+
{ecosystems.map((ecosystem, index) => <EcosystemCard key={ecosystem.id} ecosystem={ecosystem} index={index} />)}
124+
</div>
108125
</div>
109126
</div>
110127
</section>;

‎src/components/FeaturesSection.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ const FeaturesSection = () => {
5656
once: true,
5757
margin: "-50px"
5858
}} className="card-border p-6 relative overflow-hidden group">
59+
{/* Number badge */}
60+
<span className="absolute top-4 right-4 text-4xl font-nasalization font-bold text-alien-gold/10 group-hover:text-alien-green/15 transition-colors duration-300 select-none">
61+
{String(index + 1).padStart(2, '0')}
62+
</span>
63+
5964
<div className="mb-6 p-4 rounded-full bg-gradient-to-br from-alien-gold-dark/20 to-alien-green-dark/20 w-fit">
6065
<div className="text-alien-gold group-hover:text-alien-green transition-colors duration-300">
6166
{feature.icon}

‎src/components/Hero.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,19 @@ const Hero: React.FC = () => {
142142
</Button>
143143
</motion.div>
144144
</div>
145+
146+
{/* Scroll down indicator */}
147+
<motion.div
148+
className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 cursor-pointer"
149+
animate={{ y: [0, 8, 0] }}
150+
transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
151+
onClick={scrollToSpaces}
152+
>
153+
<span className="text-xs font-nasalization text-alien-gold/60 tracking-widest uppercase">Scroll</span>
154+
<svg width="20" height="12" viewBox="0 0 20 12" className="text-alien-green/50">
155+
<path d="M2 2L10 10L18 2" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />
156+
</svg>
157+
</motion.div>
145158
</section>
146159
);
147160
};

‎src/components/ParticipationSection.tsx‎

Lines changed: 1 addition & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -70,55 +70,9 @@ const ParticipationSection = () => {
7070
</motion.div>)}
7171
</div>
7272
{/* Botón */}
73-
<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">
73+
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-medium px-8 py-6 text-lg rounded-full font-nasalization">
7474
Connect & Participate
7575
</Button>
76-
{/* Stats Grid - MORE TRANSPARENT */}
77-
<div className="flex justify-center mt-12 w-full">
78-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 text-center max-w-5xl w-full">
79-
{stats.map((stat, index) => <motion.div key={index} initial={{
80-
opacity: 0,
81-
y: 20
82-
}} whileInView={{
83-
opacity: 1,
84-
y: 0
85-
}} transition={{
86-
duration: 0.5,
87-
delay: index * 0.1
88-
}} viewport={{
89-
once: true
90-
}} className="bg-alien-space-dark/30 backdrop-blur-sm p-6 rounded-xl border border-alien-gold/20 hover:border-alien-gold/40 transition-all duration-300">
91-
<div className="mx-auto mb-4">
92-
{stat.planetIcon ? (
93-
<div className="h-16 w-16 mx-auto">
94-
<img
95-
src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?w=150&h=150&fit=crop"
96-
alt="Planet Earth"
97-
className="w-full h-full object-cover rounded-full animate-pulse"
98-
style={{ filter: 'drop-shadow(0 0 12px rgba(34, 197, 94, 0.6))' }}
99-
/>
100-
</div>
101-
) : (
102-
<stat.icon className={`h-16 w-16 ${stat.color} mx-auto`} />
103-
)}
104-
</div>
105-
<motion.div initial={{
106-
scale: 0.8
107-
}} whileInView={{
108-
scale: 1
109-
}} transition={{
110-
type: "spring",
111-
stiffness: 100,
112-
delay: index * 0.1 + 0.2
113-
}} viewport={{
114-
once: true
115-
}} className={`text-3xl font-bold mb-2 ${stat.color} font-nasalization`}>
116-
{stat.value}
117-
</motion.div>
118-
<div className="text-gray-300 text-sm font-[Exo]">{stat.label}</div>
119-
</motion.div>)}
120-
</div>
121-
</div>
12276
</div>
12377
</section>;
12478
};

‎src/pages/About.tsx‎

Lines changed: 83 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -59,48 +59,94 @@ const About: React.FC = () => {
5959

6060
<div className="space-y-12 text-gray-200 font-[Exo]">
6161
{/* Web technologies section with enhanced design */}
62+
{/* Horizontal Timeline: Web 3 → Web 4 → Web 5 */}
6263
<motion.div
63-
initial={{ opacity: 0, x: -50 }}
64-
whileInView={{ opacity: 1, x: 0 }}
65-
viewport={{ once: true, amount: 0.3 }}
64+
initial={{ opacity: 0 }}
65+
whileInView={{ opacity: 1 }}
66+
viewport={{ once: true, amount: 0.2 }}
6667
transition={{ duration: 0.8 }}
6768
>
68-
<Card className="bg-alien-space-dark/80 backdrop-blur-lg border-alien-gold/30 shadow-2xl hover:border-alien-gold/50 transition-all duration-500">
69-
<CardContent className="p-8">
69+
{/* Desktop horizontal timeline */}
70+
<div className="hidden md:block relative py-12">
71+
{/* Connection line */}
72+
<div className="absolute top-1/2 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-alien-gold/40 via-alien-green/60 to-alien-gold/40 -translate-y-1/2" />
73+
74+
<div className="flex justify-between items-start relative px-[5%]">
75+
{[
76+
{ label: 'Web 3', subtitle: 'Blockchain', color: 'alien-gold', description: 'The foundation of true digital ownership and trustless transactions. Blockchain enables transparent, immutable records and smart contracts that execute automatically.' },
77+
{ label: 'Web 4', subtitle: 'A.I. Neural Networks', color: 'alien-green', description: 'Intelligent, adaptive systems that learn and evolve. Advanced neural networks power predictive analytics, automated decision-making, and personalized experiences.' },
78+
{ label: 'Web 5', subtitle: 'Quantum Computing', color: 'alien-gold', description: 'Harnessing quantum mechanics for ultra-secure communications. Quantum-resistant cryptography future-proofs the entire ecosystem with exponential computing power.' },
79+
].map((item, i) => (
80+
<motion.div
81+
key={item.label}
82+
className="flex flex-col items-center w-1/3 px-4"
83+
initial={{ opacity: 0, y: i % 2 === 0 ? 30 : -30 }}
84+
whileInView={{ opacity: 1, y: 0 }}
85+
viewport={{ once: true }}
86+
transition={{ duration: 0.6, delay: i * 0.2 }}
87+
>
88+
{/* Node dot */}
89+
<div className={`relative z-10 w-5 h-5 rounded-full bg-${item.color} shadow-[0_0_16px_rgba(34,197,94,0.4)] mb-6 ring-4 ring-alien-space-dark`} />
90+
91+
<Card className="bg-alien-space-dark/60 backdrop-blur-xl border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-500 w-full">
92+
<CardContent className="p-6 text-center">
93+
<h3 className={`text-2xl font-semibold mb-1 font-nasalization text-glow text-${item.color}`}>
94+
{item.label}
95+
</h3>
96+
<p className="text-sm text-alien-green/70 font-nasalization mb-3">{item.subtitle}</p>
97+
<div className={`w-16 h-0.5 bg-gradient-to-r from-${item.color} to-alien-green mx-auto mb-3`} />
98+
<p className="text-sm text-gray-300 leading-relaxed">{item.description}</p>
99+
</CardContent>
100+
</Card>
101+
</motion.div>
102+
))}
103+
</div>
104+
</div>
105+
106+
{/* Mobile vertical timeline */}
107+
<div className="md:hidden relative pl-8">
108+
{/* Vertical line */}
109+
<div className="absolute left-3 top-0 bottom-0 w-0.5 bg-gradient-to-b from-alien-gold/40 via-alien-green/60 to-alien-gold/40" />
110+
70111
<div className="space-y-8">
71-
<div className="text-center">
72-
<h3 className="text-3xl font-semibold mb-2 font-nasalization text-glow text-alien-green">
73-
Web 5 (Quantum Computing)
74-
</h3>
75-
<div className="w-24 h-1 bg-gradient-to-r from-alien-gold to-alien-green mx-auto mb-4"></div>
76-
<p className="text-base text-gray-300 leading-relaxed mb-6 max-w-3xl mx-auto">
77-
Harnessing quantum mechanics for ultra-secure communications and exponentially faster computations. Web 5 represents the pinnacle of decentralized identity and data sovereignty, powered by quantum-resistant cryptography that future-proofs the entire ecosystem.
78-
</p>
79-
</div>
80-
<div className="text-center">
81-
<h3 className="text-3xl font-semibold text-alien-green mb-2 font-nasalization">
82-
Web 4 (A.I. Neural Networks)
83-
</h3>
84-
<div className="w-24 h-1 bg-gradient-to-r from-alien-green to-alien-gold mx-auto mb-4"></div>
85-
<p className="text-base text-gray-300 leading-relaxed mb-6 max-w-3xl mx-auto">
86-
Intelligent, adaptive systems that learn and evolve with user behavior. Advanced neural networks power predictive analytics, automated decision-making, and personalized experiences that anticipate needs before they arise. AI agents work seamlessly across the ecosystem.
87-
</p>
88-
</div>
89-
<div className="text-center">
90-
<h3 className="text-3xl font-semibold text-alien-gold mb-4 font-nasalization">
91-
Web 3 (Blockchain)
92-
</h3>
93-
<div className="w-24 h-1 bg-gradient-to-r from-alien-gold to-alien-green mx-auto mb-6"></div>
94-
<p className="text-base text-gray-300 leading-relaxed mb-6 max-w-3xl mx-auto">
95-
The foundation of true digital ownership and trustless transactions. Blockchain technology enables transparent, immutable records and smart contracts that execute automatically. Experience decentralized governance, NFT ownership, and peer-to-peer value exchange without intermediaries.
96-
</p>
97-
</div>
98-
<p className="text-lg leading-relaxed">
99-
AlienFlowSpace DAO (Decentralized Autonomous Organization) is a revolutionary space that empowers users to seamlessly access, acquire, redeem, buy, sell, and exchange cryptocurrencies and NFTs in a secure, transparent environment. We leverage cutting-edge Web 5 quantum computing, Web 4 AI neural networks, and Web 3 blockchain technology to create an unparalleled ecosystem of innovation and sustainability.
100-
</p>
112+
{[
113+
{ label: 'Web 3', subtitle: 'Blockchain', color: 'alien-gold', description: 'The foundation of true digital ownership and trustless transactions. Blockchain enables transparent, immutable records and smart contracts.' },
114+
{ label: 'Web 4', subtitle: 'A.I. Neural Networks', color: 'alien-green', description: 'Intelligent, adaptive systems powered by neural networks for predictive analytics and automated decision-making.' },
115+
{ label: 'Web 5', subtitle: 'Quantum Computing', color: 'alien-gold', description: 'Quantum mechanics for ultra-secure communications and exponentially faster computations with quantum-resistant cryptography.' },
116+
].map((item, i) => (
117+
<motion.div
118+
key={item.label}
119+
className="relative"
120+
initial={{ opacity: 0, x: -20 }}
121+
whileInView={{ opacity: 1, x: 0 }}
122+
viewport={{ once: true }}
123+
transition={{ duration: 0.5, delay: i * 0.15 }}
124+
>
125+
{/* Node dot */}
126+
<div className={`absolute -left-[22px] top-6 w-4 h-4 rounded-full bg-${item.color} ring-4 ring-alien-space-dark shadow-[0_0_12px_rgba(34,197,94,0.3)]`} />
127+
128+
<Card className="bg-alien-space-dark/60 backdrop-blur-xl border-alien-gold/30">
129+
<CardContent className="p-5">
130+
<h3 className={`text-xl font-semibold font-nasalization text-${item.color} mb-1`}>{item.label}</h3>
131+
<p className="text-xs text-alien-green/70 font-nasalization mb-2">{item.subtitle}</p>
132+
<p className="text-sm text-gray-300 leading-relaxed">{item.description}</p>
133+
</CardContent>
134+
</Card>
135+
</motion.div>
136+
))}
101137
</div>
102-
</CardContent>
103-
</Card>
138+
</div>
139+
140+
{/* Summary paragraph */}
141+
<motion.p
142+
className="text-lg leading-relaxed mt-8 text-gray-200 font-[Exo] text-center max-w-4xl mx-auto"
143+
initial={{ opacity: 0 }}
144+
whileInView={{ opacity: 1 }}
145+
viewport={{ once: true }}
146+
transition={{ duration: 0.6, delay: 0.5 }}
147+
>
148+
AlienFlowSpace DAO is a revolutionary space that empowers users to seamlessly access, acquire, redeem, buy, sell, and exchange cryptocurrencies and NFTs. We leverage cutting-edge Web 5 quantum computing, Web 4 AI neural networks, and Web 3 blockchain technology to create an unparalleled ecosystem of innovation and sustainability.
149+
</motion.p>
104150
</motion.div>
105151

106152
{/* Four pillars section with improved grid and cards */}

‎src/pages/Index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@ const Index: React.FC = () => {
2525
</Suspense>
2626
</div>
2727

28-
{/* Stats Section */}
2928
<Suspense fallback={<LoadingScreen />}>
30-
<StatsSection />
29+
<FinancialFreedomSection />
3130
</Suspense>
3231

3332
<Suspense fallback={<LoadingScreen />}>
34-
<FinancialFreedomSection />
33+
<ExploreSpacesSection />
3534
</Suspense>
3635

36+
{/* Stats Section — after Explore for better narrative */}
3737
<Suspense fallback={<LoadingScreen />}>
38-
<ExploreSpacesSection />
38+
<StatsSection />
3939
</Suspense>
4040

4141
<Suspense fallback={<LoadingScreen />}>

0 commit comments

Comments
 (0)