Fix club and translator designs

Author: lovable-dev[bot]

src/components/FeaturedClubCard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { ExternalLink, Users, Gamepad2, Leaf, DollarSign, Music, Shield, Zap } from 'lucide-react';
+import EcoProductCarousel from '@/components/EcoProductCarousel';
 
 interface PlatformLink {
   name: string;
@@ -99,37 +100,40 @@ const FeaturedClubCard = ({ club }: { club: FeaturedClubProps }) => {
           {club.description}
         </p>
 
-        {/* Sections */}
-        <div className="space-y-4 mb-6">
+        {/* Sections - Horizontal Layout */}
+        <div className="space-y-6 mb-6">
           {club.sections.map((section, index) => (
-            <Card key={index} className="bg-alien-space-dark/60 border-alien-gold/20 backdrop-blur-sm">
-              <CardHeader className="pb-3">
-                <CardTitle className="flex items-center text-alien-gold text-sm font-nasalization">
-                  {section.icon}
-                  <span className="ml-2">{section.title}</span>
-                </CardTitle>
-                <CardDescription className="text-xs text-gray-300 font-[Exo]">
-                  {section.description}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="pt-0">
-                <div className="grid grid-cols-2 gap-2">
-                  {section.platforms.map((platform, pIndex) => (
+            <div key={index} className="bg-alien-space-dark/60 border border-alien-gold/20 backdrop-blur-sm rounded-lg p-4">
+              <div className="flex items-center text-alien-gold text-sm font-nasalization mb-3">
+                {section.icon}
+                <span className="ml-2">{section.title}</span>
+              </div>
+              <p className="text-xs text-gray-300 font-[Exo] mb-4">{section.description}</p>
+              
+              {/* Special handling for EcoFlow product carousel */}
+              {club.name === 'Δ EcoFlow' && section.title === 'Eco Products Catalog' ? (
+                <div className="mt-4">
+                  <EcoProductCarousel />
+                </div>
+              ) : (
+                <div className="flex flex-wrap gap-2">
+                  {section.platforms.sort((a, b) => a.name.localeCompare(b.name)).map((platform, pIndex) => (
                     <Button
                       key={pIndex}
                       variant="ghost"
                       size="sm"
-                      className={`${section.color} text-white hover:bg-white/20 text-xs h-8 justify-start font-[Exo]`}
+                      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]`}
                       onClick={() => platform.url && window.open(platform.url, '_blank')}
                       disabled={!platform.url}
                     >
-                      <ExternalLink className="h-3 w-3 mr-1" />
+                      {platform.icon && <img src={platform.icon} alt={platform.name} className="h-3 w-3 mr-1" />}
+                      {!platform.icon && <ExternalLink className="h-3 w-3 mr-1" />}
                       {platform.name}
                     </Button>
                   ))}
                 </div>
-              </CardContent>
-            </Card>
+              )}
+            </div>
           ))}
         </div>
 

src/components/Header/DesktopNav.tsx

@@ -34,12 +34,13 @@ const DesktopNav = () => {
     { code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
   ];
 
-  const openTranslate = (provider: 'google' | 'deepl') => {
+  const handleLanguageSelect = (lang: string) => {
     const url = window.location.href;
-    if (provider === 'google') {
-      window.open(`https://translate.google.com/translate?sl=auto&tl=es&u=${encodeURIComponent(url)}`, '_blank');
-    } else {
-      window.open(`https://www.deepl.com/translator#auto/es/${encodeURIComponent(url)}`, '_blank');
+    // Try Google Translate first, fallback to DeepL
+    try {
+      window.open(`https://translate.google.com/translate?sl=auto&tl=${lang}&u=${encodeURIComponent(url)}`, '_blank');
+    } catch (error) {
+      window.open(`https://www.deepl.com/translator#auto/${lang}/${encodeURIComponent(url)}`, '_blank');
     }
   };
 
@@ -114,6 +115,7 @@ const DesktopNav = () => {
                 <DropdownMenuItem 
                   key={lang.code} 
                   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"
+                  onSelect={(e) => { e.preventDefault(); handleLanguageSelect(lang.lang); }}
                 >
                   <img 
                     src={`https://flagcdn.com/w20/${lang.code}.png`} 
@@ -123,18 +125,6 @@ const DesktopNav = () => {
                   <span className="font-medium">{lang.name}</span>
                 </DropdownMenuItem>
               ))}
-              <DropdownMenuItem
-                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"
-                onSelect={(e) => { e.preventDefault(); openTranslate('google'); }}
-              >
-                <span className="font-medium">Traducir con Google</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                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"
-                onSelect={(e) => { e.preventDefault(); openTranslate('deepl'); }}
-              >
-                <span className="font-medium">Traducir con DeepL</span>
-              </DropdownMenuItem>
             </div>
           </DropdownMenuContent>
         </DropdownMenu>

src/pages/Clubs.tsx

@@ -407,14 +407,6 @@ const Clubs: React.FC = () => {
                 <FeaturedClubCard key={index} club={club} />
               ))}
             </div>
-            
-            {/* Special EcoFlow Product Showcase */}
-            <div className="mt-8 bg-alien-space-dark/60 p-6 rounded-xl backdrop-blur-md border border-alien-gold/30">
-              <h3 className="text-xl font-bold text-alien-gold mb-4 font-nasalization text-center">
-                🌱 EcoFlow Product Showcase
-              </h3>
-              <EcoProductCarousel />
-            </div>
           </div>
 
           {/* All Clubs + Sidebar */}