UFO navigation and DAO UI

Improve UI/UX with floating UFO-style navigation, enhance DAO dashboard visuals (faster skeletons and richer charts), replace chatbot with dynamic AI prototype, and overhaul contact/CoNetWorKing sections into space-terminal style. Also fix animated text type and integrate lazy-loaded AI iframe.

X-Lovable-Edit-ID: edt-6e5a4763-2e0a-41a1-9836-69ce8bbe78ce

Author: lovable-dev[bot]

src/components/AIChatbot.tsx

@@ -1,45 +1,106 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { X, Loader2 } from 'lucide-react';
+import { X, Loader2, Shield, Zap, HeadphonesIcon, Bot } from 'lucide-react';
 import { toast } from 'sonner';
 import aiTorAvatar from '@/assets/ai-tor-avatar.jpg';
 
-const PROACTIVE_MESSAGES = [
-  "¿Puedo ayudarte a encontrar algo?",
-  "¿Tienes alguna pregunta sobre AlienFlowSpace?",
-  "¿Necesitas ayuda con los NFTs o las DAOs?",
-  "¿Te gustaría conocer más sobre nuestro ecosistema?",
-  "¿En qué puedo asistirte hoy?"
+// AI Personalities with unique messages and slight visual variations
+const AI_PERSONALITIES = [
+  {
+    id: 'support',
+    name: 'AI Tor',
+    role: 'Soporte Técnico',
+    icon: HeadphonesIcon,
+    color: 'from-alien-green to-emerald-500',
+    borderColor: 'border-alien-green/50',
+    messages: [
+      "¿Tienes algún problema técnico? Estoy aquí para ayudarte.",
+      "¿Necesitas ayuda con tu wallet o transacciones?",
+      "¿Problemas conectando? Déjame echarte una mano.",
+      "¿Algo no funciona como esperabas? Cuéntame.",
+    ]
+  },
+  {
+    id: 'dao',
+    name: 'Voz de la DAO',
+    role: 'Estrategia',
+    icon: Zap,
+    color: 'from-alien-gold to-yellow-500',
+    borderColor: 'border-alien-gold/50',
+    messages: [
+      "¿Quieres saber cómo participar en las votaciones?",
+      "Hay propuestas activas esperando tu voto...",
+      "¿Conoces los beneficios de ser miembro de la DAO?",
+      "La comunidad está decidiendo el futuro. ¿Te unes?",
+    ]
+  },
+  {
+    id: 'sentinel',
+    name: 'Alien Sentinel',
+    role: 'Seguridad',
+    icon: Shield,
+    color: 'from-purple-500 to-violet-600',
+    borderColor: 'border-purple-500/50',
+    messages: [
+      "¿Preocupado por la seguridad de tus activos?",
+      "Recuerda: nunca compartas tus claves privadas.",
+      "¿Quieres consejos para proteger tu wallet?",
+      "La seguridad primero. ¿Alguna duda?",
+    ]
+  },
+  {
+    id: 'guide',
+    name: 'Cosmic Guide',
+    role: 'Navegador',
+    icon: Bot,
+    color: 'from-cyan-500 to-blue-500',
+    borderColor: 'border-cyan-500/50',
+    messages: [
+      "¿Primera vez en AlienFlowSpace? Te guío.",
+      "Hay mucho por explorar. ¿Por dónde empezamos?",
+      "¿Buscas algo específico en el ecosistema?",
+      "Déjame mostrarte lo que puedes hacer aquí.",
+    ]
+  }
 ];
 
 const AIChatbot = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [showProactive, setShowProactive] = useState(false);
-  const [proactiveMessage, setProactiveMessage] = useState('');
   const [hasInteracted, setHasInteracted] = useState(false);
-  // Nuevo estado para cargar el iframe solo tras el primer render de la DApp
   const [shouldLoadIframe, setShouldLoadIframe] = useState(false);
+  const [currentPersonality, setCurrentPersonality] = useState(0);
+  const [proactiveMessage, setProactiveMessage] = useState('');
+
+  // Get current personality
+  const personality = useMemo(() => AI_PERSONALITIES[currentPersonality], [currentPersonality]);
+  const PersonalityIcon = personality.icon;
 
-  // EFICIENCIA: Cargamos el iframe 2 segundos después para no bloquear el hilo principal de la DApp
+  // Lazy load iframe after initial render
   useEffect(() => {
     const timer = setTimeout(() => {
       setShouldLoadIframe(true);
     }, 2000);
     return () => clearTimeout(timer);
   }, []);
 
-  // Proactive engagement - show after 45 seconds of inactivity
+  // Proactive engagement with rotating personalities
   useEffect(() => {
     if (hasInteracted || isOpen) return;
 
     const timer = setTimeout(() => {
-      const randomMessage = PROACTIVE_MESSAGES[Math.floor(Math.random() * PROACTIVE_MESSAGES.length)];
+      // Pick random personality and message
+      const randomPersonalityIndex = Math.floor(Math.random() * AI_PERSONALITIES.length);
+      const randomPersonality = AI_PERSONALITIES[randomPersonalityIndex];
+      const randomMessage = randomPersonality.messages[Math.floor(Math.random() * randomPersonality.messages.length)];
+      
+      setCurrentPersonality(randomPersonalityIndex);
       setProactiveMessage(randomMessage);
       setShowProactive(true);
 
-      // Auto-hide after 8 seconds
-      setTimeout(() => setShowProactive(false), 8000);
+      // Auto-hide after 10 seconds
+      setTimeout(() => setShowProactive(false), 10000);
     }, 45000);
 
     return () => clearTimeout(timer);
@@ -61,10 +122,7 @@ const AIChatbot = () => {
     setIsLoading(true);
     setShowProactive(false);
     setHasInteracted(true);
-    setShouldLoadIframe(true); // Aseguramos carga si el usuario hace clic rápido
-    toast.info('AI Assistant Loading', {
-      description: 'Opening AI Tor Assistant...'
-    });
+    setShouldLoadIframe(true);
   }, []);
 
   const handleIframeLoad = useCallback(() => {
@@ -86,36 +144,62 @@ const AIChatbot = () => {
         )}
       </AnimatePresence>
 
-      {/* Proactive Engagement Bubble */}
+      {/* Proactive Engagement Bubble with Personality */}
       <AnimatePresence>
         {showProactive && !isOpen && (
           <motion.div
             initial={{ opacity: 0, x: 20, scale: 0.8 }}
             animate={{ opacity: 1, x: 0, scale: 1 }}
             exit={{ opacity: 0, x: 20, scale: 0.8 }}
             className="fixed bottom-36 right-4 sm:bottom-40 sm:right-8 z-40 
-              max-w-[250px] p-3 rounded-xl rounded-br-sm
-              bg-gradient-to-br from-alien-gold/90 to-alien-gold-dark/90 
-              backdrop-blur-md border border-alien-gold-light/50
-              shadow-lg shadow-alien-gold/20 cursor-pointer"
+              max-w-[280px] rounded-2xl rounded-br-sm overflow-hidden
+              backdrop-blur-xl border shadow-2xl cursor-pointer"
+            style={{
+              background: 'linear-gradient(135deg, rgba(17,17,25,0.95) 0%, rgba(30,30,40,0.95) 100%)',
+              borderColor: `rgba(${personality.id === 'support' ? '57,255,20' : personality.id === 'dao' ? '240,216,130' : personality.id === 'sentinel' ? '168,85,247' : '34,211,238'},0.4)`
+            }}
             onClick={handleOpen}
           >
-            <p className="text-alien-space-dark font-exo text-sm font-medium">
-              {proactiveMessage}
-            </p>
+            {/* Personality Header */}
+            <div className={`bg-gradient-to-r ${personality.color} p-2 px-3 flex items-center gap-2`}>
+              <PersonalityIcon className="w-4 h-4 text-white" />
+              <div className="flex-1">
+                <p className="text-white text-xs font-nasalization font-bold">{personality.name}</p>
+                <p className="text-white/80 text-[10px] font-exo">{personality.role}</p>
+              </div>
+              <div className="w-6 h-6 rounded-full overflow-hidden border border-white/30">
+                <img 
+                  src={aiTorAvatar} 
+                  alt={personality.name}
+                  className="w-full h-full object-cover"
+                  style={{
+                    filter: personality.id === 'sentinel' ? 'hue-rotate(270deg)' : 
+                           personality.id === 'guide' ? 'hue-rotate(180deg)' : 
+                           personality.id === 'dao' ? 'sepia(30%)' : 'none'
+                  }}
+                />
+              </div>
+            </div>
+            {/* Message */}
+            <div className="p-3">
+              <p className="text-gray-200 font-exo text-sm leading-relaxed">
+                {proactiveMessage}
+              </p>
+            </div>
+            {/* Close button */}
             <button
               onClick={(e) => { e.stopPropagation(); setShowProactive(false); }}
-              className="absolute -top-2 -right-2 w-5 h-5 bg-alien-space-dark rounded-full 
-                flex items-center justify-center border border-alien-gold/50 
-                hover:bg-alien-gold/20 transition-colors"
+              className="absolute -top-2 -right-2 w-6 h-6 bg-alien-space-dark rounded-full 
+                flex items-center justify-center border border-gray-600 
+                hover:bg-gray-700 transition-colors shadow-lg"
             >
-              <X className="w-3 h-3 text-alien-gold" />
+              <X className="w-3 h-3 text-gray-400" />
             </button>
           </motion.div>
         )}
       </AnimatePresence>
 
-      {/* Floating Button */}
+      {/* Floating Button with pulsing ring */}
       <motion.button
         initial={{ opacity: 0, scale: 0.5 }}
         animate={{ opacity: 1, scale: 1 }}
@@ -125,18 +209,22 @@ const AIChatbot = () => {
           bg-gradient-to-br from-alien-gold to-alien-gold-dark backdrop-blur-md 
           border-2 border-alien-gold-light rounded-full
           hover:scale-110 transition-all duration-300 
-          shadow-2xl hover:shadow-alien-gold/50 ai-button-pulse
-          overflow-hidden w-14 h-14 sm:w-16 sm:h-16"
+          shadow-2xl hover:shadow-alien-gold/50
+          overflow-hidden w-14 h-14 sm:w-16 sm:h-16
+          relative"
         aria-label="Open AI Assistant"
       >
+        {/* Pulsing ring */}
+        <span className="absolute inset-0 rounded-full animate-ping bg-alien-gold/30" style={{ animationDuration: '2s' }} />
+        <span className="absolute inset-0 rounded-full animate-pulse bg-gradient-to-br from-alien-green/20 to-transparent" />
         <img 
           src={aiTorAvatar} 
           alt="AI Tor" 
-          className="w-full h-full object-cover"
+          className="w-full h-full object-cover relative z-10"
         />
       </motion.button>
 
-      {/* Chat Window - Fullscreen on mobile, optimized size on desktop */}
+      {/* Chat Window */}
       <AnimatePresence>
         {isOpen && (
           <motion.div
@@ -152,24 +240,29 @@ const AIChatbot = () => {
               sm:max-h-[calc(100vh-10rem)]
               bg-alien-space-dark/98 backdrop-blur-xl 
               border-2 border-alien-gold/40 rounded-xl 
-              shadow-2xl overflow-hidden chat-glow"
+              shadow-2xl overflow-hidden"
+            style={{
+              boxShadow: '0 0 40px rgba(57,255,20,0.1), 0 0 80px rgba(240,216,130,0.05)'
+            }}
           >
             {/* Header */}
             <div className="bg-gradient-to-r from-alien-space-dark via-alien-space/90 to-alien-space-dark 
               border-b border-alien-gold/30 p-3 sm:p-4 flex items-center justify-between">
               <div className="flex items-center gap-3">
-                <div className="w-10 h-10 sm:w-11 sm:h-11 rounded-full overflow-hidden border-2 border-alien-gold/50">
+                <div className="w-10 h-10 sm:w-11 sm:h-11 rounded-full overflow-hidden border-2 border-alien-gold/50 relative">
                   <img 
                     src={aiTorAvatar} 
                     alt="AI Tor" 
                     className="w-full h-full object-cover"
                   />
+                  {/* Online indicator */}
+                  <span className="absolute bottom-0 right-0 w-3 h-3 bg-alien-green rounded-full border-2 border-alien-space-dark" />
                 </div>
                 <div>
                   <h3 className="text-alien-gold font-bold font-nasalization text-sm sm:text-base">
-                    AI Assistant
+                    AI Tor
                   </h3>
-                  <p className="text-xs text-alien-green font-exo">AI Tor</p>
+                  <p className="text-xs text-alien-green font-exo">Asistente Inteligente</p>
                 </div>
                 <div className="flex items-center gap-1.5 ml-2">
                   {isLoading ? (
@@ -179,10 +272,7 @@ const AIChatbot = () => {
                       <span className="typing-dot" style={{ animationDelay: '0.4s' }} />
                     </div>
                   ) : (
-                    <>
-                      <span className="w-2 h-2 bg-alien-green rounded-full animate-pulse" />
-                      <span className="text-xs text-muted-foreground hidden sm:inline">Online</span>
-                    </>
+                    <span className="text-xs text-alien-green/80 hidden sm:inline font-exo">Conectado</span>
                   )}
                 </div>
               </div>
@@ -203,24 +293,31 @@ const AIChatbot = () => {
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                   className="absolute inset-0 top-14 sm:top-16 flex flex-col items-center justify-center 
-                    bg-alien-space-dark/95 z-10"
+                    bg-alien-space-dark/98 z-10"
                 >
                   <div className="relative">
                     <div className="w-20 h-20 rounded-full overflow-hidden border-2 border-alien-gold/50 mb-4">
                       <img 
                         src={aiTorAvatar} 
                         alt="AI Tor Loading" 
-                        className="w-full h-full object-cover animate-pulse"
+                        className="w-full h-full object-cover"
                       />
                     </div>
                     <Loader2 className="absolute -bottom-1 -right-1 h-8 w-8 text-alien-gold animate-spin" />
                   </div>
-                  <p className="text-alien-gold font-nasalization text-sm mt-4 uppercase tracking-tighter">Establishing Link...</p>
+                  <p className="text-alien-gold font-nasalization text-sm mt-4 uppercase tracking-wider">
+                    Sincronizando...
+                  </p>
+                  <div className="flex gap-1.5 mt-3">
+                    <span className="w-2 h-2 bg-alien-green rounded-full animate-bounce" style={{ animationDelay: '0s' }} />
+                    <span className="w-2 h-2 bg-alien-green rounded-full animate-bounce" style={{ animationDelay: '0.15s' }} />
+                    <span className="w-2 h-2 bg-alien-green rounded-full animate-bounce" style={{ animationDelay: '0.3s' }} />
+                  </div>
                 </motion.div>
               )}
             </AnimatePresence>
 
-            {/* iframe Content con carga diferida */}
+            {/* iframe Content with lazy loading */}
             {shouldLoadIframe && (
               <iframe
                 src="https://aitor.lovable.app/"
@@ -230,7 +327,9 @@ const AIChatbot = () => {
                 onLoad={handleIframeLoad}
                 onError={() => {
                   setIsLoading(false);
-                  toast.error('AI Assistant Error');
+                  toast.error('Error de conexión', {
+                    description: 'No se pudo conectar con AI Tor. Intenta de nuevo.'
+                  });
                 }}
               />
             )}

src/components/AnimatedText.tsx

@@ -1,20 +1,19 @@
-
-import { motion, TargetAndTransition, VariantLabels } from "framer-motion";
+import { motion, TargetAndTransition, VariantLabels, Transition } from "framer-motion";
 import React from "react";
 
 // Props for the AnimatedText component
 interface AnimatedTextProps {
-  children: React.ReactNode; // Content of the animated text
-  className?: string; // Additional classes to customize styles
-  initial?: boolean | TargetAndTransition | VariantLabels; // Initial animation configuration (optional)
-  animate?: boolean | TargetAndTransition | VariantLabels; // Final animation configuration (optional)
-  transition?: { duration?: number; ease?: string | number[]; delay?: number }; // Transition configuration (optional)
+  children: React.ReactNode;
+  className?: string;
+  initial?: boolean | TargetAndTransition | VariantLabels;
+  animate?: boolean | TargetAndTransition | VariantLabels;
+  transition?: Transition;
 }
 
 const AnimatedText: React.FC<AnimatedTextProps> = ({
   children,
   className = "",
-  initial = { opacity: 0, y: 20 }, // Default values
+  initial = { opacity: 0, y: 20 },
   animate = { opacity: 1, y: 0 },
   transition = { duration: 0.8 },
 }) => {