Update Academy & Navigations

Refactored AIChatbot, ScrollToTop, Academy partners, and navigation menus. Added ACE AGameFlow and AlienTrip links. Fixed partner logo fallbacks and improved ConnectButton UX.

X-Lovable-Edit-ID: edt-76f35780-6bf9-4b59-a2ab-5bad58556c44
Co-authored-by: Alien69Flow <111972684+Alien69Flow@users.noreply.github.com>

Author: lovable-dev[bot]

.lovable/plan.md

@@ -1,77 +1,2 @@
 
-
-# Plan de Actualización Integral: AlienFlowSpace dApp
-
----
-
-## Problemas Identificados
-
-1. **Botón AI Tor se superpone con ScrollToTop** - Ambos en `bottom-6/8 right-6/8`, z-index conflictivo
-2. **Chat AI Tor muy pequeño al abrirse** - El iframe de aitor.lovable.app apenas muestra contenido útil
-3. **Falta opción para abrir AI Tor en URL completa** - No hay botón "Open in new tab"
-4. **Menú sin enlaces a Telegram MiniApp (ACE/AGameFlow) ni AlienTrip directo**
-5. **Logos de partners en Academy** - Varios externos (Meslo, Motus DAO, My DNA Bank) probablemente rotos (URLs inventadas)
-6. **Wallet Connect button** - Funcionalidad básica pero sin feedback visual claro ni manejo de errores robusto
-
----
-
-## Cambios a Implementar
-
-### 1. Fix Botón AI Tor vs ScrollToTop (Solapamiento)
-
-**`src/components/ScrollToTop.tsx`**: Mover a `bottom-8 left-8` (esquina inferior izquierda) para evitar conflicto con AI Tor que está en `bottom-6 right-6`.
-
-**`src/components/AIChatbot.tsx`**:
-- Añadir botón "Open Full" (ExternalLink icon) en el header del chat que abre `https://aitor.lovable.app/` en nueva pestaña
-- Aumentar tamaño del chat window: `h-[80vh] max-h-[700px]` y `sm:w-[420px] md:w-[480px]`
-- Mejorar el header con botón de expandir a pantalla completa
-
-### 2. Menú: Nuevos enlaces
-
-**`src/components/Header/DesktopNav.tsx`** y **`src/components/Header/MobileNav.tsx`**:
-- Añadir en el dropdown "EXPLORE SPACES" un separador y sección "APPS" con:
-  - **ACE AGameFlow** → enlace externo a la Telegram MiniApp (necesito URL, usaré placeholder `https://t.me/AlienFlowBot`)
-  - **AlienTrip** ya está en navLinks principales, verificar que funcione
-
-### 3. Academy Partners - Fix logos rotos
-
-**`src/pages/Academy.tsx`**:
-- **HEALTHFLOW**: Reemplazar URLs inventadas (meslo.com/logo.svg, motusdao.io/logo.svg, mydnabank.com/logo.png) por iconos Lucide como fallback visual (Heart, Activity, Dna) ya que no existen logos verificables
-- **SPACEFLOW**: SpaceX logo de Wikipedia puede fallar por CORS; usar fallback con `onError`
-- Mejorar el diseño de la sección partners: aumentar tamaño de logos a `w-11 h-11`, mejorar spacing
-- Añadir título de sección más prominente con icono
-
-### 4. Wallet Connect - Mejoras
-
-**`src/components/Header/ConnectButton.tsx`**:
-- Simplificar el layout del AI Key (quitar show/hide, mostrar solo icono de copia)
-- Mejorar feedback visual del estado de conexión
-- Añadir indicador de red (network badge)
-- Fix: el componente `regenerateAIKey` se importa pero no se usa en el render
-
-### 5. UI/UX Global Polish
-
-**Todos los archivos afectados**:
-- Consistencia en rounded corners (`rounded-2xl`)
-- Hover transitions uniformes (`hover:scale-[1.01] transition-all duration-300`)
-- Mejorar contraste de textos sobre fondos oscuros
-
----
-
-## Archivos a Modificar
-
-| Archivo | Cambio Principal |
-|---------|-----------------|
-| `src/components/ScrollToTop.tsx` | Mover a esquina inferior izquierda |
-| `src/components/AIChatbot.tsx` | Botón "Open Full", tamaño mayor, UI mejorada |
-| `src/components/Header/DesktopNav.tsx` | Añadir sección APPS en dropdown |
-| `src/components/Header/MobileNav.tsx` | Añadir sección APPS en acordeón |
-| `src/pages/Academy.tsx` | Fix logos rotos, mejorar diseño partners |
-| `src/components/Header/ConnectButton.tsx` | Simplificar, mejorar feedback |
-
----
-
-## Pregunta Pendiente
-
-Necesito la URL exacta de la Telegram MiniApp de ACE AGameFlow para el menú. Si no la tienes, usaré un placeholder que puedas actualizar después.
-
+Aquí tienes el plan de acción corregido y ultra-detallado. He inyectado tus instrucciones de jerarquía, la nueva categoría estratégica CashFlow, el orden alfabético y la restauración estética del día 23.Copia este texto y pégalo directamente en el botón "Edit Plan" de Lovable antes de darle a "Approve".Academy Page Redesign Plan: Quantum Restoration & Strategic Expansion1. Hero Header: 23rd Jan RestorationPriority: Restore the high-tech visual identity exactly as it was on January 23rd.Circular Logo Frame: Restore the double-ring circular frame with depth shadows and the "Quantum Glow" (pulsating animation).Typography: Reset title to 'Nasalization' font with the original green/gold gradient and drop-shadow.Subtitle/Quote: Restore the italicized, wide-spaced subtitle with the original golden-muted color palette.Spacing: Do not over-compact. Maintain the original vertical breathing room that felt premium.2. Partners: Logical & Institutional RestructuringOrganize all partners ALPHABETICALLY within these specific categories:CategoryIncluded PartnersACADEMY PARTNERSAcademia, AulaFacil, Coursera, Cursa, edX, GrowGoogle, Hotmart, MasterClass, Mooc, SkillShare, Udacity, UNED.CASHFLOWAzrael Codex (Bitget), Predik.HEALTHFLOWMeslo Ltd, Motus DAO, My DNA Bank, Proton, Yazio.DATAFLOWAlchemy, HackMD, HackerRank.ECOFLOWClimateReanalyzer, OEGlobal, OpenUpEd.GAMEFLOWExplore, Unity Learn.SPACEFLOWESA, KAGRA, LIGO, LSC, NASA, UNESCO, UNSSC, Virgo.3. Asset & Logo IntegrityPriority 1: Use all files from /lovable-uploads/Academy/ (matching the GitHub repository).Priority 2: For missing official logos (NASA, Coursera, Proton, etc.), use high-resolution official Wiki/External URLs as previously implemented.Visuals: Maintain the grayscale to color filter on hover.Links: Ensure every partner has its functional external link.4. UI/UX Polish (Contact Us & Global)Contact Page: Fix the H1 separator by adding horizontal gradient lines (transparent -> alien-green -> transparent) to the sides of the center dot.Chat Bubble: Add the triangular "comic-style" pointer to the message bubble in the Contact section to make it look like a real chat.Interactions: Ensure all cards use the scale-[1.01] transition with a 300ms duration.5. Technical ImplementationUpdate src/pages/Academy.tsx as a single, clean file.Ensure the partnerCategories constant reflects the alphabetical order and the new CashFlow category.6. Proactive ExpansionIntegrate 2 or 3 additional high-prestige institutions in SpaceFlow or HealthFlow (e.g., SpaceX, CERN, or major BioTech labs) if high-quality logos are available, to enhance institutional weight.

src/components/AIChatbot.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Loader2, Sparkles, Rocket, Zap } from 'lucide-react';
+import { X, Loader2, Sparkles, Rocket, Zap, ExternalLink } from 'lucide-react';
 import aiTorAvatar from '@/assets/ai-tor-avatar.jpg';
 
 const AI_DAPP_ROLES = [
@@ -18,7 +18,6 @@ const AIChatbot = () => {
 
   const currentRole = useMemo(() => AI_DAPP_ROLES[currentRoleIndex], [currentRoleIndex]);
 
-  // Gestión Proactiva (Tiempos 18s / 33s)
   useEffect(() => {
     if (hasInteracted || isOpen) return;
     const timer = setTimeout(() => {
@@ -29,7 +28,6 @@ const AIChatbot = () => {
     return () => clearTimeout(timer);
   }, [hasInteracted, isOpen]);
 
-  // Tracking de interacción (Escucha si el usuario mueve el mouse o tecla)
   useEffect(() => {
     const handleInteraction = () => setHasInteracted(true);
     const events = ['mousedown', 'keydown', 'touchstart'];
@@ -39,7 +37,7 @@ const AIChatbot = () => {
 
   return (
     <>
-      {/* Botón Avatar con entrada desde el Hiperespacio */}
+      {/* Botón Avatar */}
       <motion.button
         initial={{ scale: 0, rotate: -180, filter: "blur(20px)" }}
         animate={{ scale: 1, rotate: 0, filter: "blur(0px)" }}
@@ -71,17 +69,17 @@ const AIChatbot = () => {
         )}
       </AnimatePresence>
 
-      {/* Interfaz de Chat Adaptable (Móvil/Tablet/PC) */}
+      {/* Chat Window - Enlarged with Open Full button */}
       <AnimatePresence>
         {isOpen && (
           <motion.div
             initial={{ opacity: 0, scale: 0, x: 150, y: 150, filter: "blur(20px)" }}
             animate={{ opacity: 1, scale: 1, x: 0, y: 0, filter: "blur(0px)" }}
             exit={{ opacity: 0, scale: 0, x: 150, y: 150, filter: "blur(20px)" }}
             transition={{ duration: 0.5, ease: "circOut" }}
-            className="fixed z-[9999] bottom-6 right-6 left-6 sm:left-auto sm:w-[380px] md:w-[420px] h-[75vh] max-h-[600px] bg-alien-space-dark rounded-[2.5rem] border-2 border-alien-gold/30 shadow-[0_0_80px_rgba(0,0,0,0.9)] overflow-hidden flex flex-col"
+            className="fixed z-[9999] bottom-6 right-6 left-6 sm:left-auto sm:w-[420px] md:w-[480px] h-[80vh] max-h-[700px] bg-alien-space-dark rounded-[2.5rem] border-2 border-alien-gold/30 shadow-[0_0_80px_rgba(0,0,0,0.9)] overflow-hidden flex flex-col"
           >
-            {/* Header Interface */}
+            {/* Header with Open Full button */}
             <div className="p-5 bg-black/60 border-b border-white/10 flex justify-between items-center">
               <div className="flex items-center gap-3">
                 <div className="w-9 h-9 rounded-full border border-alien-green/50 p-0.5">
@@ -92,12 +90,23 @@ const AIChatbot = () => {
                   <span className="text-alien-green text-[8px] font-exo uppercase animate-pulse">Online • Quantum Link</span>
                 </div>
               </div>
-              <button onClick={() => setIsOpen(false)} className="p-2 hover:bg-white/10 rounded-full text-white/50 hover:text-alien-green transition-all">
-                <X size={22} />
-              </button>
+              <div className="flex items-center gap-1">
+                <a
+                  href="https://aitor.lovable.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-2 hover:bg-white/10 rounded-full text-white/50 hover:text-alien-green transition-all"
+                  title="Open Full AI Tor"
+                >
+                  <ExternalLink size={18} />
+                </a>
+                <button onClick={() => setIsOpen(false)} className="p-2 hover:bg-white/10 rounded-full text-white/50 hover:text-alien-green transition-all">
+                  <X size={22} />
+                </button>
+              </div>
             </div>
 
-            {/* Iframe & Radar de Carga */}
+            {/* Iframe */}
             <div className="flex-1 bg-black relative">
               {isLoading && (
                 <div className="absolute inset-0 flex flex-col items-center justify-center bg-alien-space-dark z-10">

src/components/Header/ConnectButton.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
 import { useAppKit } from '@reown/appkit/react';
-import { Brain, Copy, CheckCircle } from 'lucide-react';
+import { Copy, CheckCircle } from 'lucide-react';
 import { useWalletConnection } from '@/hooks/useWalletConnection';
-import { regenerateAIKey } from '@/utils/aiKeyGenerator';
 import { toast } from 'sonner';
 
 const WALLET_ICON = "/lovable-uploads/AW.png";
@@ -16,75 +15,45 @@ const shortAddress = (addr: string) =>
 
 const ConnectButton = () => {
   const { open } = useAppKit();
-  const { address, isConnected, aiKey, isLoadingKey } = useWalletConnection();
+  const { address, isConnected, aiKey } = useWalletConnection();
   const [copied, setCopied] = React.useState(false);
-  const [showAIKey, setShowAIKey] = React.useState(false);
 
   const copyAIKey = () => {
     if (aiKey) {
       navigator.clipboard.writeText(aiKey);
       setCopied(true);
-      toast.success('AI Key Copied!', {
-        description: 'Your AI key has been copied to clipboard.'
-      });
+      toast.success('AI Key Copied!');
       setTimeout(() => setCopied(false), 2000);
     }
   };
 
-  const handleRegenerateKey = () => {
-    if (address) {
-      const newKey = regenerateAIKey(address);
-      toast.success('AI Key Regenerated!', {
-        description: 'A new AI key has been generated for your wallet.'
-      });
-    }
-  };
-
   return (
-    <div className="flex flex-wrap items-center gap-3">
+    <div className="flex items-center gap-3">
       {isConnected && address ? (
         <>
-          <div className="flex flex-col gap-2">
+          {/* Connected state: address + optional AI key copy + manage */}
+          <div className="flex items-center gap-2">
             <span
-              className="
-                text-alien-gold font-mono text-xs sm:text-sm bg-alien-green px-3 py-1 rounded-full
-                border border-alien-gold shadow transition-all duration-200 select-all
-              "
+              className="text-alien-gold font-mono text-xs bg-alien-green/20 px-3 py-1.5 rounded-full border border-alien-gold/30 shadow-sm select-all"
               title={address}
             >
               {shortAddress(address)}
             </span>
+            {/* Inline AI key copy button */}
             {aiKey && (
               <button
-                onClick={() => setShowAIKey(!showAIKey)}
-                className="text-xs text-alien-gold hover:text-alien-gold-light transition-colors"
+                onClick={copyAIKey}
+                className="p-1.5 rounded-full bg-alien-gold/10 hover:bg-alien-gold/20 border border-alien-gold/20 text-alien-gold hover:text-alien-green transition-all duration-300"
+                title="Copy AI Key"
               >
-                {showAIKey ? 'Hide AI Key' : 'Show AI Key'}
+                {copied ? <CheckCircle className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
               </button>
             )}
           </div>
-          
-          {showAIKey && aiKey && (
-            <div className="flex items-center gap-2 bg-alien-space-dark/80 p-2 rounded-lg border border-alien-gold/30">
-              <span className="text-xs text-gray-300 font-mono">{aiKey.substring(0, 16)}...</span>
-              <Button
-                size="sm"
-                onClick={copyAIKey}
-                className="bg-alien-gold/20 hover:bg-alien-gold/30 p-1 h-6"
-              >
-                {copied ? <CheckCircle className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
-              </Button>
-            </div>
-          )}
 
           <Button
             onClick={() => open({ view: "Account" })}
-            className="
-              bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
-              flex items-center justify-center p-2 sm:p-3
-              transition-all duration-200 ease-in-out
-              hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
-            "
+            className="bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full flex items-center justify-center p-2 sm:p-3 transition-all duration-300 hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold"
             title="Manage Wallet"
             aria-label="Manage Wallet"
             type="button"
@@ -97,23 +66,13 @@ const ConnectButton = () => {
         </>
       ) : (
         <Button
-          className="
-            bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
-            flex items-center justify-center p-2 sm:p-3
-            transition-all duration-200 ease-in-out
-            hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
-          "
+          className="bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full flex items-center justify-center p-2 sm:p-3 transition-all duration-300 hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold"
           onClick={() => open({ view: "Connect" })}
-          title="Conectar Wallet"
-          aria-label="Conectar Wallet"
+          title="Connect Wallet"
+          aria-label="Connect Wallet"
           type="button"
         >
-          <img
-            src={WALLET_ICON}
-            alt="Wallet Logo"
-            className={`${ICON_SIZE} rounded-full object-cover`}
-            draggable={false}
-          />
+          <img src={WALLET_ICON} alt="Wallet Logo" className={`${ICON_SIZE} rounded-full object-cover`} draggable={false} />
         </Button>
       )}
       <a
@@ -126,22 +85,12 @@ const ConnectButton = () => {
         tabIndex={-1}
       >
         <Button
-          className="
-            bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full
-            flex items-center justify-center p-2 sm:p-3
-            transition-all duration-200 ease-in-out
-            hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold
-          "
+          className="bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full flex items-center justify-center p-2 sm:p-3 transition-all duration-300 hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold"
           type="button"
         >
           <picture>
             <source srcSet={PORTAL_ICON_AVIF} type="image/avif" />
-            <img
-              src={PORTAL_ICON_JPG}
-              alt="Portal Icon"
-              className={`${ICON_SIZE} rounded-full object-cover`}
-              draggable={false}
-            />
+            <img src={PORTAL_ICON_JPG} alt="Portal Icon" className={`${ICON_SIZE} rounded-full object-cover`} draggable={false} />
           </picture>
         </Button>
       </a>