Refactor UI and fix bugs

The user wants to:
- Make text legible with Star Wars effect.
- Update CoinGecko widget to dark mode.
- Fix mobile menu buttons, wallet connection error, and Clubs page content.
- Implement translation button functionality.
- Make the UI fully responsive across devices.

Author: lovable-dev[bot]

src/components/Header/DesktopNav.tsx

@@ -34,6 +34,15 @@ const DesktopNav = () => {
     { code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
   ];
 
+  const openTranslate = (provider: 'google' | 'deepl') => {
+    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');
+    }
+  };
+
   return (
     <nav className="hidden lg:flex items-center gap-8">
       <div className="flex items-center space-x-6">
@@ -114,6 +123,18 @@ 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/components/Header/MobileNav.tsx

@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { Globe, ChevronDown, ChevronUp } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import ConnectButton from '@/components/Header/ConnectButton';
 
 interface MobileNavProps {
   isMenuOpen: boolean;
@@ -39,6 +40,15 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
     { code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' }
   ];
 
+  const openTranslate = (provider: 'google' | 'deepl') => {
+    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');
+    }
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0, height: 0 }}
@@ -163,6 +173,18 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
                       <span className="text-xs">{lang.name}</span>
                     </motion.div>
                   ))}
+                  <div
+                    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"
+                    onClick={() => openTranslate('google')}
+                  >
+                    <span className="text-xs font-medium">Traducir con Google</span>
+                  </div>
+                  <div
+                    className="p-3 hover:bg-alien-space-light/30 cursor-pointer text-alien-gold hover:text-alien-green transition-all duration-300"
+                    onClick={() => openTranslate('deepl')}
+                  >
+                    <span className="text-xs font-medium">Traducir con DeepL</span>
+                  </div>
                 </motion.div>
               )}
             </AnimatePresence>

src/components/Header/index.tsx

@@ -61,7 +61,7 @@ const Header = () => {
         )}
       </AnimatePresence>
 
-      <div className="w-full border-t border-alien-gold/20 border-b border-alien-gold/20 bg-white">
+      <div className="w-full border-t border-alien-gold/20 border-b border-alien-gold/20 bg-transparent">
         <PriceTicker />
       </div>
     </header>

src/components/Hero.tsx

@@ -54,7 +54,7 @@ const Hero = () => {
 
           <div className="star-wars-crawl mb-4">
             <div className="star-wars-content py-2">
-              <motion.div className="text-base sm:text-lg md:text-xl text-gray-300 max-w-4xl mx-auto font-[Exo] text-center leading-relaxed" style={{
+              <motion.div className="text-[clamp(1rem,1.8vw,1.25rem)] md:text-[clamp(1.1rem,1.6vw,1.35rem)] text-foreground readable-glow max-w-4xl mx-auto font-[Exo] text-center leading-relaxed" style={{
               letterSpacing: '0.01em'
             }} initial={{
               opacity: 0

src/components/PriceTicker.tsx

@@ -30,6 +30,7 @@ const PriceTicker: React.FC = () => {
     <div className="w-full overflow-visible min-h-[48px]">
       <gecko-coin-price-marquee-widget
         locale="es"
+        dark-mode="true"
         outlined="true"
         coin-ids="bitcoin,tether-gold,ethereum,binancecoin,bitcoin-cash,bittensor,solana,litecoin,hyperliquid,chainlink,injective-protocol,uniswap,aptos,cosmos,bitget-token,polkadot,sui,the-open-network,near,nexo,cardano,tron,crypto-com-chain"
         initial-currency="usd"

src/index.css

@@ -104,6 +104,13 @@
     0 0 24px rgba(240, 216, 130, 0.2);
 }
 
+/* Mejora de legibilidad para párrafos sobre fondos complejos */
+.readable-glow {
+  text-shadow:
+    0 2px 6px hsl(var(--background) / 0.85),
+    0 0 24px hsl(var(--background) / 0.65);
+}
+
 .green-glow {
   filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.6)) drop-shadow(0 0 20px rgba(34, 197, 94, 0.3));
 }