Skip to content

Commit ab70cd4

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix mobile menu and loading screen
1 parent 7ba8af0 commit ab70cd4

File tree

5 files changed

+139
-31
lines changed

5 files changed

+139
-31
lines changed

‎src/components/FeaturedClubCard.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
100100
{club.description}
101101
</p>
102102

103-
{/* Sections - Horizontal Layout */}
104-
<div className="space-y-6 mb-6">
103+
{/* Sections - Horizontal Grid Layout */}
104+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
105105
{club.sections.map((section, index) => (
106106
<div key={index} className="bg-alien-space-dark/60 border border-alien-gold/20 backdrop-blur-sm rounded-lg p-4">
107107
<div className="flex items-center text-alien-gold text-sm font-nasalization mb-3">
@@ -116,19 +116,19 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
116116
<EcoProductCarousel />
117117
</div>
118118
) : (
119-
<div className="flex flex-wrap gap-2">
119+
<div className="grid grid-cols-2 gap-2">
120120
{section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
121121
<Button
122122
key={pIndex}
123123
variant="ghost"
124124
size="sm"
125-
className={`${section.color} text-white hover:bg-white/20 text-xs h-8 justify-center font-[Exo] min-w-[100px] flex-1 max-w-[140px]`}
125+
className={`${section.color} text-white hover:bg-white/20 text-xs h-8 justify-start font-[Exo] w-full`}
126126
onClick={() => platform.url && window.open(platform.url, '_blank')}
127127
disabled={!platform.url}
128128
>
129-
{platform.icon && <img src={platform.icon} alt={platform.name} className="h-3 w-3 mr-1" />}
130-
{!platform.icon && <ExternalLink className="h-3 w-3 mr-1" />}
131-
{platform.name}
129+
{platform.icon && <img src={platform.icon} alt={platform.name} className="h-3 w-3 mr-1 flex-shrink-0" />}
130+
{!platform.icon && <ExternalLink className="h-3 w-3 mr-1 flex-shrink-0" />}
131+
<span className="truncate">{platform.name}</span>
132132
</Button>
133133
))}
134134
</div>

‎src/components/Header/MobileNav.tsx‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,15 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
4040
{ code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
4141
];
4242

43-
const openTranslate = (provider: 'google' | 'deepl') => {
44-
const url = window.location.href;
45-
if (provider === 'google') {
46-
window.open(`https://translate.google.com/translate?sl=auto&tl=es&u=${encodeURIComponent(url)}`, '_blank');
47-
} else {
48-
window.open(`https://www.deepl.com/translator#auto/es/${encodeURIComponent(url)}`, '_blank');
43+
const translatePage = (langCode: string) => {
44+
const currentUrl = window.location.href;
45+
const googleTranslateUrl = `https://translate.google.com/translate?sl=auto&tl=${langCode}&u=${encodeURIComponent(currentUrl)}`;
46+
47+
try {
48+
window.open(googleTranslateUrl, '_blank');
49+
} catch (error) {
50+
const deeplUrl = `https://www.deepl.com/translator#en/${langCode}/${encodeURIComponent(currentUrl)}`;
51+
window.open(deeplUrl, '_blank');
4952
}
5053
};
5154

@@ -164,6 +167,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
164167
animate={{ opacity: 1, x: 0 }}
165168
transition={{ delay: index * 0.05 }}
166169
className="p-2 hover:bg-alien-space-light/30 cursor-pointer text-alien-gold hover:text-alien-green flex items-center gap-2 transition-all duration-300"
170+
onClick={() => translatePage(lang.lang)}
167171
>
168172
<img
169173
src={`https://flagcdn.com/w20/${lang.code}.png`}
@@ -173,18 +177,6 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
173177
<span className="text-xs">{lang.name}</span>
174178
</motion.div>
175179
))}
176-
<div
177-
className="p-3 hover:bg-alien-space-light/30 cursor-pointer text-alien-gold hover:text-alien-green transition-all duration-300 border-t border-alien-gold/20"
178-
onClick={() => openTranslate('google')}
179-
>
180-
<span className="text-xs font-medium">Traducir con Google</span>
181-
</div>
182-
<div
183-
className="p-3 hover:bg-alien-space-light/30 cursor-pointer text-alien-gold hover:text-alien-green transition-all duration-300"
184-
onClick={() => openTranslate('deepl')}
185-
>
186-
<span className="text-xs font-medium">Traducir con DeepL</span>
187-
</div>
188180
</motion.div>
189181
)}
190182
</AnimatePresence>

‎src/components/LoadingScreen.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
const LoadingScreen = () => {
4+
return (
5+
<div className="fixed inset-0 bg-alien-space-dark z-50 flex items-center justify-center">
6+
<div className="text-center">
7+
<img
8+
src="/lovable-uploads/ALogo.png"
9+
alt="AlienFlowSpace Logo"
10+
className="w-32 h-32 mx-auto mb-6 animate-pulse"
11+
/>
12+
<div className="flex items-center justify-center gap-2">
13+
<div className="w-3 h-3 bg-alien-gold rounded-full animate-bounce" style={{ animationDelay: '0s' }}></div>
14+
<div className="w-3 h-3 bg-alien-gold rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
15+
<div className="w-3 h-3 bg-alien-gold rounded-full animate-bounce" style={{ animationDelay: '0.4s' }}></div>
16+
</div>
17+
</div>
18+
</div>
19+
);
20+
};
21+
22+
export default LoadingScreen;

‎src/pages/CoNetWorKing.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,99 @@ const CoNetWorKing: React.FC = () => {
465465
</div>
466466
</div>
467467

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>
560+
468561
{/* CTA Section */}
469562
<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">
470563
<Network className="h-16 w-16 text-alien-gold mx-auto mb-6" />

‎src/pages/Index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Suspense, lazy } from 'react';
22
import StarBackground from '@/components/StarBackground';
3+
import LoadingScreen from '@/components/LoadingScreen';
34

45
// Lazy loading de secciones
56
const Hero = lazy(() => import('@/components/Hero'));
@@ -17,29 +18,29 @@ const Index: React.FC = () => {
1718
<div className="absolute inset-0 -z-10">
1819
<StarBackground />
1920
</div>
20-
<Suspense fallback={<div className="h-[80vh] flex items-center justify-center">Loading...</div>}>
21+
<Suspense fallback={<LoadingScreen />}>
2122
<Hero />
2223
</Suspense>
2324
</div>
2425

2526
{/* Secciones con lazy loading */}
26-
<Suspense fallback={<div className="h-40 flex items-center justify-center">Loading section...</div>}>
27+
<Suspense fallback={<LoadingScreen />}>
2728
<FinancialFreedomSection />
2829
</Suspense>
2930

30-
<Suspense fallback={<div className="h-40 flex items-center justify-center">Loading section...</div>}>
31+
<Suspense fallback={<LoadingScreen />}>
3132
<ExploreSpacesSection />
3233
</Suspense>
3334

34-
<Suspense fallback={<div className="h-40 flex items-center justify-center">Loading section...</div>}>
35+
<Suspense fallback={<LoadingScreen />}>
3536
<EcosystemSection />
3637
</Suspense>
3738

38-
<Suspense fallback={<div className="h-40 flex items-center justify-center">Loading section...</div>}>
39+
<Suspense fallback={<LoadingScreen />}>
3940
<FeaturesSection />
4041
</Suspense>
4142

42-
<Suspense fallback={<div className="h-40 flex items-center justify-center">Loading section...</div>}>
43+
<Suspense fallback={<LoadingScreen />}>
4344
<div className="section-center">
4445
<ParticipationSection />
4546
</div>

0 commit comments

Comments
 (0)