Skip to content

Commit 5d94779

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Improve UI and functionality
1 parent 905c5e3 commit 5d94779

File tree

9 files changed

+171
-54
lines changed

9 files changed

+171
-54
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { Bitcoin, TrendingUp, Shield, Coins, Zap, Lock, ShoppingCart, Wand2, Spa
44
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
55
const FinancialFreedomSection = () => {
66
return (
7-
<section className="py-24 relative overflow-hidden">
8-
{/* Enhanced background decorative elements */}
7+
<section className="py-24 relative overflow-hidden bg-glow-radial">
8+
{/* Background layers matching hero */}
9+
<div className="absolute inset-0 bg-stars bg-cover bg-center opacity-30"></div>
910
<div className="absolute inset-0">
1011
<div className="absolute top-20 left-20 w-32 h-32 bg-alien-gold/10 rounded-full blur-3xl animate-pulse"></div>
1112
<div className="absolute bottom-20 right-20 w-40 h-40 bg-alien-green/10 rounded-full blur-3xl animate-pulse delay-1000"></div>

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,25 @@ const DesktopNav = () => {
2828
{ code: 'us', name: 'English', lang: 'en' },
2929
{ code: 'es', name: 'Español', lang: 'es' },
3030
{ code: 'fr', name: 'Français', lang: 'fr' },
31+
{ code: 'de', name: 'Deutsch', lang: 'de' },
3132
{ code: 'cn', name: '汉语 (Hànyǔ)', lang: 'zh' },
3233
{ code: 'in', name: 'हिन्दी (Hindī)', lang: 'hi' },
3334
{ code: 'pt', name: 'Português', lang: 'pt' },
3435
{ code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
3536
];
3637

37-
const openTranslate = (provider: 'google' | 'deepl') => {
38-
const url = window.location.href;
39-
if (provider === 'google') {
40-
window.open(`https://translate.google.com/translate?sl=auto&tl=es&u=${encodeURIComponent(url)}`, '_blank');
38+
const translatePage = (langCode: string, service: 'google' | 'deepl') => {
39+
const currentUrl = window.location.href;
40+
let translateUrl: string;
41+
42+
if (service === 'google') {
43+
translateUrl = `https://translate.google.com/translate?sl=auto&tl=${langCode}&u=${encodeURIComponent(currentUrl)}`;
4144
} else {
42-
window.open(`https://www.deepl.com/translator#auto/es/${encodeURIComponent(url)}`, '_blank');
45+
// DeepL direct translation
46+
translateUrl = `https://www.deepl.com/translator?utm_source=alienflowspace#auto/${langCode}/${encodeURIComponent(window.location.hostname)}`;
4347
}
48+
49+
window.open(translateUrl, '_blank', 'noopener,noreferrer');
4450
};
4551

4652
return (
@@ -114,6 +120,7 @@ const DesktopNav = () => {
114120
<DropdownMenuItem
115121
key={lang.code}
116122
className="flex items-center gap-3 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/30 cursor-pointer p-3 rounded-lg transition-all duration-300"
123+
onSelect={(e) => { e.preventDefault(); translatePage(lang.lang, 'google'); }}
117124
>
118125
<img
119126
src={`https://flagcdn.com/w20/${lang.code}.png`}
@@ -123,16 +130,19 @@ const DesktopNav = () => {
123130
<span className="font-medium">{lang.name}</span>
124131
</DropdownMenuItem>
125132
))}
133+
<div className="border-t border-alien-gold/20 my-2" />
126134
<DropdownMenuItem
127135
className="flex items-center gap-3 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/30 cursor-pointer p-3 rounded-lg transition-all duration-300"
128-
onSelect={(e) => { e.preventDefault(); openTranslate('google'); }}
136+
onSelect={(e) => { e.preventDefault(); translatePage('es', 'google'); }}
129137
>
138+
<Globe className="w-4 h-4" />
130139
<span className="font-medium">Traducir con Google</span>
131140
</DropdownMenuItem>
132141
<DropdownMenuItem
133142
className="flex items-center gap-3 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/30 cursor-pointer p-3 rounded-lg transition-all duration-300"
134-
onSelect={(e) => { e.preventDefault(); openTranslate('deepl'); }}
143+
onSelect={(e) => { e.preventDefault(); translatePage('es', 'deepl'); }}
135144
>
145+
<Globe className="w-4 h-4" />
136146
<span className="font-medium">Traducir con DeepL</span>
137147
</DropdownMenuItem>
138148
</div>

‎src/components/Hero.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,18 +58,18 @@ const Hero: React.FC = () => {
5858
<span className="text-alien-gold"> DAO</span>
5959
</motion.h1>
6060

61-
{/* Star Wars inspired description */}
61+
{/* Star Wars inspired description - Static and optimized */}
6262
<motion.div
63-
className="star-wars-crawl"
63+
className="max-w-4xl mx-auto text-center"
6464
initial={{ opacity: 0 }}
6565
animate={{ opacity: 1 }}
6666
transition={{ delay: 0.5, duration: 1 }}
6767
>
68-
<div className="star-wars-content">
69-
<p className="mb-4 text-sm sm:text-base lg:text-lg">
68+
<div className="starwars-text space-y-4">
69+
<p className="text-base sm:text-lg lg:text-xl font-medium leading-relaxed">
7070
Access the DAO with Innovative Solutions, Unlocks Energy Efficiency & Environmental Sustainability.
7171
</p>
72-
<p className="text-sm sm:text-base lg:text-lg opacity-90">
72+
<p className="text-sm sm:text-base lg:text-lg opacity-90 leading-relaxed">
7373
Advantages Boosting the BENEFITS, for Connecting you and Raise your QUALITY of LIFE, with Mutual PROFITS…
7474
</p>
7575
</div>

‎src/components/LoadingLogo.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
4+
const LoadingLogo: React.FC = () => {
5+
return (
6+
<div className="fixed inset-0 bg-alien-space-dark/95 backdrop-blur-sm z-50 flex items-center justify-center">
7+
<motion.div
8+
className="flex flex-col items-center"
9+
initial={{ opacity: 0, scale: 0.8 }}
10+
animate={{ opacity: 1, scale: 1 }}
11+
exit={{ opacity: 0, scale: 0.8 }}
12+
transition={{ duration: 0.5, ease: "easeOut" }}
13+
>
14+
<motion.img
15+
src="/lovable-uploads/ALogo.png"
16+
alt="AlienFlowSpaceDAO Logo"
17+
className="h-24 w-24 logo-glow"
18+
animate={{
19+
scale: [1, 1.1, 1],
20+
rotate: [0, 5, -5, 0]
21+
}}
22+
transition={{
23+
duration: 2,
24+
repeat: Infinity,
25+
repeatType: "reverse",
26+
ease: "easeInOut"
27+
}}
28+
/>
29+
<motion.div
30+
className="mt-4 flex space-x-1"
31+
initial={{ opacity: 0 }}
32+
animate={{ opacity: 1 }}
33+
transition={{ delay: 0.3 }}
34+
>
35+
{[0, 1, 2].map((index) => (
36+
<motion.div
37+
key={index}
38+
className="w-2 h-2 bg-alien-gold rounded-full"
39+
animate={{
40+
scale: [1, 1.5, 1],
41+
opacity: [0.5, 1, 0.5]
42+
}}
43+
transition={{
44+
duration: 1.5,
45+
repeat: Infinity,
46+
delay: index * 0.2
47+
}}
48+
/>
49+
))}
50+
</motion.div>
51+
<motion.p
52+
className="mt-3 text-alien-green font-[Exo] text-sm"
53+
initial={{ opacity: 0 }}
54+
animate={{ opacity: 1 }}
55+
transition={{ delay: 0.5 }}
56+
>
57+
Initializing AlienFlowSpace...
58+
</motion.p>
59+
</motion.div>
60+
</div>
61+
);
62+
};
63+
64+
export default LoadingLogo;

‎src/index.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -166,15 +166,16 @@
166166
background: linear-gradient(145deg, hsl(var(--sidebar-accent)), hsl(var(--sidebar-primary)));
167167
}
168168

169-
/* Professional Star Wars text styling - Subtle and harmonious */
169+
/* Enhanced Star Wars text styling - Professional and readable */
170170
.starwars-text {
171-
color: hsl(var(--primary));
171+
color: hsl(var(--foreground));
172172
text-shadow:
173-
0 1px 3px rgba(0, 0, 0, 0.3),
174-
0 0 8px hsl(var(--primary) / 0.2);
173+
0 2px 4px rgba(0, 0, 0, 0.5),
174+
0 0 12px hsl(var(--primary) / 0.4),
175+
0 0 24px hsl(var(--secondary) / 0.2);
175176
font-family: 'Nasalization', sans-serif;
176-
font-weight: bold;
177-
letter-spacing: 1px;
177+
font-weight: 500;
178+
letter-spacing: 0.5px;
178179
}
179180

180181
/* Clean Star Wars crawl - No background box, subtle animation */

‎src/pages/AlienTrip.tsx‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -93,27 +93,37 @@ const AlienTrip: React.FC = () => {
9393
</Card>
9494

9595
<div className="flex flex-wrap gap-4 mb-8">
96-
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization">
96+
<Button
97+
className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark font-nasalization hover:shadow-lg hover:scale-105 transition-all duration-300"
98+
onClick={() => window.location.href = '/contact'}
99+
>
97100
<Rocket className="mr-2 h-5 w-5" /> Join the Journey
98101
</Button>
99-
<Button variant="outline" className="border-alien-green text-alien-green hover:bg-alien-green/20 font-nasalization" onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}>
100-
<ScrollText className="mr-2 h-5 w-5" /> Look Greenpapers
102+
<Button
103+
className="bg-alien-green/20 border-alien-green text-alien-green hover:bg-alien-green hover:text-alien-space-dark font-nasalization border-2 hover:shadow-lg hover:scale-105 transition-all duration-300"
104+
onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}
105+
>
106+
<ScrollText className="mr-2 h-5 w-5" /> Documentation & Greenpapers
101107
</Button>
102108
</div>
103109

104-
{/* GitBook Card */}
105-
<Card className="bg-alien-space-dark/50 backdrop-blur-md border-alien-gold/20">
110+
{/* Combined Documentation Card - Simplified */}
111+
<Card className="bg-alien-space-dark/50 backdrop-blur-md border-alien-gold/20 hover:border-alien-gold/40 transition-all duration-300">
106112
<CardContent className="p-6">
107113
<div className="flex items-center mb-4">
108114
<BookOpen className="h-6 w-6 text-alien-gold mr-3" />
109-
<h3 className="text-xl font-semibold text-alien-gold font-nasalization">Official Documentation</h3>
115+
<h3 className="text-xl font-semibold text-alien-gold font-nasalization">Complete Documentation Hub</h3>
110116
</div>
111117
<p className="text-gray-300 mb-4 font-[Exo]">
112-
Access our comprehensive documentation to learn about tokenomics, roadmap, and
113-
technical specifications of the ΔlieπFlΦw $pac€ DAO ecosystem.
118+
Access our complete documentation including whitepaper, tokenomics, roadmap, and all technical specifications in one place.
114119
</p>
115-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="flex items-center text-alien-green hover:text-alien-green-light font-[Exo]">
116-
<span>Visit GitBook</span>
120+
<a
121+
href="https://alienflowspace.gitbook.io/DAO"
122+
target="_blank"
123+
rel="noopener noreferrer"
124+
className="inline-flex items-center text-alien-green hover:text-alien-green-light font-[Exo] hover:scale-105 transition-all duration-300"
125+
>
126+
<span>Complete GitBook Hub</span>
117127
<Rocket className="ml-2 h-4 w-4" />
118128
</a>
119129
</CardContent>
@@ -213,11 +223,6 @@ const AlienTrip: React.FC = () => {
213223
</div>
214224
</div>
215225

216-
<div className="text-center mt-8">
217-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]">
218-
View detailed tokenomics <Rocket className="ml-2 h-4 w-4" />
219-
</a>
220-
</div>
221226
</CardContent>
222227
</Card>
223228
</div>
@@ -288,11 +293,6 @@ const AlienTrip: React.FC = () => {
288293
</div>)}
289294
</div>
290295

291-
<div className="text-center mt-8">
292-
<a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="text-alien-green hover:text-alien-green-light inline-flex items-center font-[Exo]">
293-
View complete roadmap <Rocket className="ml-2 h-4 w-4" />
294-
</a>
295-
</div>
296296
</div>
297297

298298
<Card className="bg-alien-space-dark/70 backdrop-blur-md border-alien-gold/20">
@@ -302,9 +302,18 @@ const AlienTrip: React.FC = () => {
302302
The AlienFlowSpace DAO is more than a project—it's a movement to transform blockchain collaboration across the multiverse. Be part of this revolutionary journey.
303303
</p>
304304
<div className="flex flex-wrap justify-center gap-4">
305-
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark px-8 py-6 font-nasalization">
305+
<Button
306+
className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark px-8 py-6 font-nasalization hover:shadow-lg hover:scale-105 transition-all duration-300"
307+
onClick={() => window.location.href = '/contact'}
308+
>
306309
<Rocket className="mr-2 h-5 w-5" /> Join AlienFlowSpace
307310
</Button>
311+
<Button
312+
className="bg-alien-green/20 border-alien-green text-alien-green hover:bg-alien-green hover:text-alien-space-dark font-nasalization border-2 px-8 py-6 hover:shadow-lg hover:scale-105 transition-all duration-300"
313+
onClick={() => window.open("https://alienflowspace.gitbook.io/DAO", "_blank")}
314+
>
315+
<BookOpen className="mr-2 h-5 w-5" /> Complete Documentation
316+
</Button>
308317
</div>
309318
</CardContent>
310319
</Card>

‎src/pages/CoNetWorKing.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ const CoNetWorKing: React.FC = () => {
254254

255255
<main className="container mx-auto px-4 pt-32 pb-16 relative z-20">
256256
<div className="max-w-7xl mx-auto">
257-
{/* Hero Section */}
257+
{/* Hero Section with better readability */}
258258
<div className="text-center mb-20">
259259
<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">
260260
<img
@@ -263,12 +263,14 @@ const CoNetWorKing: React.FC = () => {
263263
className="h-16 w-16 object-contain"
264264
/>
265265
</div>
266-
<h1 className="text-5xl md:text-7xl font-bold text-alien-gold mb-8 font-[Atomic Age, Star Wars] text-glow">
267-
CoNetWorKing
268-
</h1>
269-
<p className="text-2xl text-gray-200 max-w-4xl mx-auto font-[Exo] leading-relaxed">
270-
Connect with the future of decentralized finance through our comprehensive suite of blockchain services
271-
</p>
266+
<div className="readable-panel max-w-4xl mx-auto">
267+
<h1 className="text-5xl md:text-7xl font-bold text-alien-gold mb-6 font-nasalization">
268+
CoNetWorKing
269+
</h1>
270+
<p className="text-xl md:text-2xl text-gray-100 font-[Exo] leading-relaxed">
271+
Connect with the future of decentralized finance through our comprehensive suite of blockchain services
272+
</p>
273+
</div>
272274
</div>
273275

274276
{/* Services Grid */}

‎src/pages/Contact.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const Contact: React.FC = () => {
88
return (
99
<div className="relative flex flex-col flex-1">
1010

11-
<main className="relative z-10 flex-grow container mx-auto px-4 pt-4 pb-16">
11+
<main className="relative z-10 flex-grow container mx-auto px-4 pt-20 pb-16">
1212
<div className="max-w-6xl mx-auto">
13-
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-8 font-nasalization text-center">Contact Us</h1>
13+
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-12 font-nasalization text-center">Contact Us</h1>
1414

1515
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
1616
{/* Contact Methods - Takes 2/3 of the space on large screens */}
@@ -19,8 +19,8 @@ const Contact: React.FC = () => {
1919
Have questions or want to join the AlienFlowSpace DAO? Reach out through any of these cosmic channels:
2020
</p>
2121

22-
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
23-
<div className="flex items-center p-4 bg-alien-space-dark/80 rounded-lg backdrop-blur-md hover:bg-alien-space-dark/90 transition-colors border border-alien-gold/20">
22+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
23+
<div className="flex items-center p-6 bg-alien-space-dark/80 rounded-lg backdrop-blur-md hover:bg-alien-space-dark/90 transition-colors border border-alien-gold/20 hover:border-alien-gold/40 hover:scale-105 transition-all duration-300">
2424
<div className="w-10 h-10 rounded-full bg-alien-green flex items-center justify-center mr-4">
2525
<Disc className="h-5 w-5 text-alien-space-dark" />
2626
</div>

‎src/pages/Index.tsx‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import React, { Suspense, lazy } from 'react';
1+
import React, { Suspense, lazy, useState, useEffect } from 'react';
2+
import { motion } from 'framer-motion';
23
import StarBackground from '@/components/StarBackground';
4+
import LoadingLogo from '@/components/LoadingLogo';
35

46
// Lazy loading de secciones
57
const Hero = lazy(() => import('@/components/Hero'));
@@ -10,14 +12,42 @@ const FinancialFreedomSection = lazy(() => import('@/components/FinancialFreedom
1012
const ParticipationSection = lazy(() => import('@/components/ParticipationSection'));
1113

1214
const Index: React.FC = () => {
15+
const [isLoading, setIsLoading] = useState(true);
16+
17+
useEffect(() => {
18+
// Simulate loading time for better UX
19+
const timer = setTimeout(() => {
20+
setIsLoading(false);
21+
}, 1500);
22+
23+
return () => clearTimeout(timer);
24+
}, []);
25+
26+
if (isLoading) {
27+
return <LoadingLogo />;
28+
}
29+
1330
return (
1431
<div className="relative z-10 min-h-screen">
1532
{/* Hero con efecto Star Wars + estrellas */}
1633
<div className="relative">
1734
<div className="absolute inset-0 -z-10">
1835
<StarBackground />
1936
</div>
20-
<Suspense fallback={<div className="h-[80vh] flex items-center justify-center">Loading...</div>}>
37+
<Suspense fallback={
38+
<div className="h-[80vh] flex items-center justify-center">
39+
<div className="flex items-center space-x-3">
40+
<motion.img
41+
src="/lovable-uploads/ALogo.png"
42+
alt="Loading"
43+
className="h-8 w-8 logo-glow"
44+
animate={{ rotate: 360 }}
45+
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
46+
/>
47+
<span className="text-alien-gold font-[Exo]">Loading Hero...</span>
48+
</div>
49+
</div>
50+
}>
2151
<Hero />
2252
</Suspense>
2353
</div>

0 commit comments

Comments
 (0)