Skip to content

Commit 2b995d6

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Address card layout, translator, and portal link issues
1 parent 9d6e453 commit 2b995d6

File tree

7 files changed

+137
-99
lines changed

7 files changed

+137
-99
lines changed

‎src/components/FeaturedClubCard.tsx‎

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -83,74 +83,77 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
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-
{/* Header */}
87-
<div className="flex justify-between items-start mb-6">
88-
<div className="p-4 bg-alien-space-dark/80 rounded-xl backdrop-blur-md border border-alien-gold/30 group-hover:border-alien-gold/50 transition-all duration-300">
89-
{club.icon}
90-
</div>
91-
<span className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm`}>
92-
{club.category}
93-
</span>
94-
</div>
86+
<div className="flex flex-row gap-6 items-stretch">
87+
{/* Left sidebar with icon, meta and actions */}
88+
<aside className="w-60 min-w-[15rem] bg-alien-space-dark/60 border border-alien-gold/20 rounded-lg p-4 backdrop-blur-sm flex flex-col justify-between">
89+
<div>
90+
<div className="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">
91+
{club.icon}
92+
</div>
93+
<span className={`mt-3 inline-block px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm`}>
94+
{club.category}
95+
</span>
96+
<h3 className="mt-4 text-xl font-bold text-alien-gold font-nasalization group-hover:text-alien-gold-light transition-colors">
97+
{club.name}
98+
</h3>
99+
<p className="text-gray-200 mt-2 text-sm font-[Exo] leading-relaxed">
100+
{club.description}
101+
</p>
102+
</div>
103+
<div className="mt-4">
104+
<div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm mb-3">
105+
<Users className="h-4 w-4 text-alien-green mr-2" />
106+
<span className="text-sm text-alien-green font-medium">
107+
{club.members.toLocaleString()} members
108+
</span>
109+
</div>
110+
<Button
111+
variant="outline"
112+
className="w-full border-alien-gold/50 text-alien-gold hover:bg-alien-gold/20 hover:border-alien-gold text-sm px-4 py-2 h-auto font-[Exo] font-medium backdrop-blur-sm"
113+
>
114+
Join Club
115+
</Button>
116+
</div>
117+
</aside>
95118

96-
<h3 className="text-xl font-bold text-alien-gold mb-3 font-nasalization group-hover:text-alien-gold-light transition-colors">
97-
{club.name}
98-
</h3>
99-
<p className="text-gray-200 mb-6 text-sm font-[Exo] leading-relaxed">
100-
{club.description}
101-
</p>
119+
{/* Right content with sections */}
120+
<div className="flex-1">
121+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
122+
{club.sections.map((section, index) => (
123+
<div key={index} className="bg-alien-space-dark/60 border border-alien-gold/20 backdrop-blur-sm rounded-lg p-4">
124+
<div className="flex items-center text-alien-gold text-sm font-nasalization mb-3">
125+
{section.icon}
126+
<span className="ml-2">{section.title}</span>
127+
</div>
128+
<p className="text-xs text-gray-300 font-[Exo] mb-4">{section.description}</p>
102129

103-
{/* Sections - Horizontal Grid Layout */}
104-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
105-
{club.sections.map((section, index) => (
106-
<div key={index} className="bg-alien-space-dark/60 border border-alien-gold/20 backdrop-blur-sm rounded-lg p-4">
107-
<div className="flex items-center text-alien-gold text-sm font-nasalization mb-3">
108-
{section.icon}
109-
<span className="ml-2">{section.title}</span>
110-
</div>
111-
<p className="text-xs text-gray-300 font-[Exo] mb-4">{section.description}</p>
112-
113-
{/* Special handling for EcoFlow product carousel */}
114-
{club.name === 'Δ EcoFlow' && section.title === 'Eco Products Catalog' ? (
115-
<div className="mt-4">
116-
<EcoProductCarousel />
117-
</div>
118-
) : (
119-
<div className="grid grid-cols-2 gap-2">
120-
{section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
121-
<Button
122-
key={pIndex}
123-
variant="ghost"
124-
size="sm"
125-
className={`${section.color} text-white hover:bg-white/20 text-xs h-8 justify-start font-[Exo] w-full`}
126-
onClick={() => platform.url && window.open(platform.url, '_blank')}
127-
disabled={!platform.url}
128-
>
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>
132-
</Button>
133-
))}
130+
{/* Special handling for EcoFlow product carousel */}
131+
{club.name === 'Δ EcoFlow' && section.title === 'Eco Products Catalog' ? (
132+
<div className="mt-4">
133+
<EcoProductCarousel />
134+
</div>
135+
) : (
136+
<div className="grid grid-cols-2 gap-2">
137+
{section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
138+
<Button
139+
key={pIndex}
140+
variant="ghost"
141+
size="sm"
142+
className={`${section.color} text-white hover:bg-white/20 text-xs h-8 justify-start font-[Exo] w-full`}
143+
onClick={() => platform.url && window.open(platform.url, '_blank')}
144+
disabled={!platform.url}
145+
>
146+
{platform.icon && <img src={platform.icon} alt={platform.name} className="h-3 w-3 mr-1 flex-shrink-0" />}
147+
{!platform.icon && <ExternalLink className="h-3 w-3 mr-1 flex-shrink-0" />}
148+
<span className="truncate">{platform.name}</span>
149+
</Button>
150+
))}
151+
</div>
152+
)}
134153
</div>
135-
)}
154+
))}
136155
</div>
137-
))}
138-
</div>
139-
140-
{/* Footer */}
141-
<div className="flex justify-between items-center">
142-
<div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm">
143-
<Users className="h-4 w-4 text-alien-green mr-2" />
144-
<span className="text-sm text-alien-green font-medium">
145-
{club.members.toLocaleString()} members
146-
</span>
147156
</div>
148-
<Button
149-
variant="outline"
150-
className="border-alien-gold/50 text-alien-gold hover:bg-alien-gold/20 hover:border-alien-gold text-sm px-4 py-2 h-auto font-[Exo] font-medium backdrop-blur-sm"
151-
>
152-
Join Club
153-
</Button>
154157
</div>
155158
</div>
156159
</div>

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
DropdownMenuTrigger,
1010
} from "@/components/ui/dropdown-menu";
1111
import { Button } from "@/components/ui/button";
12+
import { translateTo } from '@/lib/translator';
1213

1314
const DesktopNav = () => {
1415
const navLinks = [
@@ -35,13 +36,7 @@ const DesktopNav = () => {
3536
];
3637

3738
const handleLanguageSelect = (lang: string) => {
38-
const url = window.location.href;
39-
// Try Google Translate (website translate), fallback to DeepL Website Translator
40-
try {
41-
window.open(`https://translate.google.com/translate?sl=auto&tl=${lang}&u=${encodeURIComponent(url)}`, '_blank', 'noopener,noreferrer');
42-
} catch (error) {
43-
window.open(`https://www.deepl.com/translate?url=${encodeURIComponent(url)}&tl=${lang}&op=translate`, '_blank', 'noopener,noreferrer');
44-
}
39+
translateTo(lang);
4540
};
4641

4742
return (

‎src/components/Header/MobileNav.tsx‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
55
import { Globe, ChevronDown, ChevronUp } from 'lucide-react';
66
import { Button } from '@/components/ui/button';
77
import ConnectButton from '@/components/Header/ConnectButton';
8+
import { translateTo } from '@/lib/translator';
89

910
interface MobileNavProps {
1011
isMenuOpen: boolean;
@@ -41,14 +42,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
4142
];
4243

4344
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-
try {
47-
window.open(googleTranslateUrl, '_blank', 'noopener,noreferrer');
48-
} catch (error) {
49-
const deeplUrl = `https://www.deepl.com/translate?url=${encodeURIComponent(currentUrl)}&tl=${langCode}&op=translate`;
50-
window.open(deeplUrl, '_blank', 'noopener,noreferrer');
51-
}
45+
translateTo(langCode);
5246
};
5347

5448
return (
@@ -188,18 +182,9 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
188182
transition={{ delay: 0.6 }}
189183
className="pt-2"
190184
>
191-
<Button
192-
className="w-full bg-alien-green hover:bg-alien-green-light text-alien-space-dark rounded-lg py-2 flex items-center justify-center gap-2 font-nasalization transition-all duration-300 hover:scale-105"
193-
onClick={() => window.open('https://aliendex.vercel.app', '_blank', 'noopener,noreferrer')}
194-
aria-label="Open AlienDex Portal"
195-
>
196-
<img
197-
src="/lovable-uploads/AW.png"
198-
alt="Wallet"
199-
className="h-5 w-5 rounded-full"
200-
/>
201-
<span>Connect Portal</span>
202-
</Button>
185+
<div className="w-full">
186+
<ConnectButton />
187+
</div>
203188
</motion.div>
204189
</nav>
205190
</div>

‎src/components/Header/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,14 @@ const Header = () => {
1818
if (isMobile === undefined) {
1919
return (
2020
<div className="bg-alien-space-dark h-14 w-full flex items-center justify-center font-nasalization">
21-
<div className="animate-pulse text-alien-gold">Loading...</div>
21+
<div className="flex items-center gap-3">
22+
<img src="/lovable-uploads/ALogo.png" alt="AlienFlowSpace" className="h-8 w-8 animate-pulse" />
23+
<div className="flex gap-1">
24+
<span className="w-1.5 h-1.5 bg-alien-gold rounded-full animate-bounce" style={{animationDelay:'0s'}}></span>
25+
<span className="w-1.5 h-1.5 bg-alien-gold rounded-full animate-bounce" style={{animationDelay:'0.15s'}}></span>
26+
<span className="w-1.5 h-1.5 bg-alien-gold rounded-full animate-bounce" style={{animationDelay:'0.3s'}}></span>
27+
</div>
28+
</div>
2229
</div>
2330
);
2431
}

‎src/components/Layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
22
import { Outlet, useLocation } from 'react-router-dom';
33
import Header from './Header';
44
import Footer from './Footer';
5+
import { initGoogleTranslate } from '@/lib/translator';
56

67
const Layout: React.FC = () => {
78
const location = useLocation();
@@ -11,6 +12,11 @@ const Layout: React.FC = () => {
1112
window.scrollTo(0, 0);
1213
}, [location.pathname]);
1314

15+
// Initialize Google Website Translator once
16+
useEffect(() => {
17+
initGoogleTranslate();
18+
}, []);
19+
1420
// Map of route backgrounds
1521
const bgMap: Record<string, string> = {
1622
'/': "/lovable-uploads/EMWBack.png",
@@ -32,6 +38,7 @@ const Layout: React.FC = () => {
3238
style={{ backgroundImage: `url('${bgImage}')` }}
3339
/>
3440

41+
<div id="google_translate_element" className="hidden" aria-hidden="true"></div>
3542
<Header />
3643

3744
{/* Main content */}

‎src/lib/translator.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* Simple in-page translation using Google Website Translator */
2+
3+
declare global {
4+
interface Window {
5+
googleTranslateElementInit?: () => void;
6+
google?: any;
7+
}
8+
}
9+
10+
export function initGoogleTranslate() {
11+
if (document.getElementById('google-translate-script')) return;
12+
// Define init callback
13+
window.googleTranslateElementInit = function () {
14+
try {
15+
// @ts-ignore - global google object injected by script
16+
new window.google.translate.TranslateElement({
17+
pageLanguage: 'auto',
18+
autoDisplay: false,
19+
layout: 0,
20+
}, 'google_translate_element');
21+
} catch (_) {
22+
// ignore
23+
}
24+
};
25+
const s = document.createElement('script');
26+
s.id = 'google-translate-script';
27+
s.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
28+
s.async = true;
29+
document.head.appendChild(s);
30+
}
31+
32+
export function translateTo(lang: string) {
33+
// Set googtrans cookie so the widget translates in-place without new tabs
34+
const val = `/auto/${lang}`;
35+
try {
36+
const host = window.location.hostname;
37+
document.cookie = `googtrans=${val}; path=/;`;
38+
document.cookie = `googtrans=${val}; domain=.${host}; path=/;`;
39+
// Apply translation (widget reads cookie on load)
40+
setTimeout(() => window.location.reload(), 60);
41+
} catch (_) {
42+
// As a last resort, just reload
43+
window.location.reload();
44+
}
45+
}

‎src/pages/Clubs.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -402,14 +402,10 @@ 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="overflow-x-auto pb-2" aria-label="Featured clubs horizontal list">
406-
<div className="flex gap-6 snap-x snap-mandatory">
407-
{[...featuredClubs].sort((a, b) => a.name.localeCompare(b.name)).map((club, index) => (
408-
<div key={index} className="min-w-[320px] md:min-w-[520px] xl:min-w-[560px] snap-start">
409-
<FeaturedClubCard club={club} />
410-
</div>
411-
))}
412-
</div>
405+
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
406+
{[...featuredClubs].sort((a, b) => a.name.localeCompare(b.name)).map((club, index) => (
407+
<FeaturedClubCard key={index} club={club} />
408+
))}
413409
</div>
414410
</div>
415411

0 commit comments

Comments
 (0)