Improve AI chat UI UX

Implements loading state, responsive AI chat, and official AI Tor avatar
- Replace brain icon with Ai_Tor avatar for chat button
- Fullscreen chat on mobile with improved overlay and responsive sizing
- Add loading overlay with avatar, spinner, and typing indicators
- Update chat header to AI Assistant with AI Tor label
- Add proactive and typing indicators, and manage iframe load/error states
- Integrate NFTGallery, PromoBanner, NewsletterSubscription, AdBanner scaffolding
- Update Contact page social links and DAODashboard visuals
- General UI tweaks for readability and responsiveness

X-Lovable-Edit-ID: edt-9bd0bb65-f148-482b-b194-1ae16896154d

Author: lovable-dev[bot]

src/components/AIChatbot.tsx

@@ -1,24 +1,64 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, Loader2 } 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?"
+];
+
 const AIChatbot = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(true);
+  const [showProactive, setShowProactive] = React.useState(false);
+  const [proactiveMessage, setProactiveMessage] = React.useState('');
+  const [hasInteracted, setHasInteracted] = React.useState(false);
+
+  // Proactive engagement - show after 45 seconds of inactivity
+  useEffect(() => {
+    if (hasInteracted || isOpen) return;
+
+    const timer = setTimeout(() => {
+      const randomMessage = PROACTIVE_MESSAGES[Math.floor(Math.random() * PROACTIVE_MESSAGES.length)];
+      setProactiveMessage(randomMessage);
+      setShowProactive(true);
+      
+      // Auto-hide after 8 seconds
+      setTimeout(() => setShowProactive(false), 8000);
+    }, 45000);
+
+    return () => clearTimeout(timer);
+  }, [hasInteracted, isOpen]);
 
-  const handleOpen = () => {
+  // Track user interaction
+  useEffect(() => {
+    const handleInteraction = () => setHasInteracted(true);
+    window.addEventListener('click', handleInteraction, { once: true });
+    window.addEventListener('scroll', handleInteraction, { once: true });
+    return () => {
+      window.removeEventListener('click', handleInteraction);
+      window.removeEventListener('scroll', handleInteraction);
+    };
+  }, []);
+
+  const handleOpen = useCallback(() => {
     setIsOpen(true);
     setIsLoading(true);
+    setShowProactive(false);
+    setHasInteracted(true);
     toast.info('AI Assistant Loading', {
       description: 'Opening AI Tor Assistant...'
     });
-  };
+  }, []);
 
-  const handleIframeLoad = () => {
+  const handleIframeLoad = useCallback(() => {
     setIsLoading(false);
-  };
+  }, []);
 
   return (
     <>
@@ -35,6 +75,35 @@ const AIChatbot = () => {
         )}
       </AnimatePresence>
 
+      {/* Proactive Engagement Bubble */}
+      <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"
+            onClick={handleOpen}
+          >
+            <p className="text-alien-space-dark font-exo text-sm font-medium">
+              {proactiveMessage}
+            </p>
+            <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"
+            >
+              <X className="w-3 h-3 text-alien-gold" />
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
       {/* Floating Button */}
       <motion.button
         initial={{ opacity: 0, scale: 0.5 }}
@@ -56,7 +125,7 @@ const AIChatbot = () => {
         />
       </motion.button>
 
-      {/* Chat Window - Fullscreen on mobile */}
+      {/* Chat Window - Fullscreen on mobile, optimized size on desktop */}
       <AnimatePresence>
         {isOpen && (
           <motion.div
@@ -67,8 +136,8 @@ const AIChatbot = () => {
             className="fixed z-50 
               inset-0 sm:inset-auto
               sm:bottom-24 sm:right-8 
-              sm:w-[380px] md:w-[420px] 
-              sm:h-[550px] md:h-[600px]
+              sm:w-[360px] md:w-[380px] 
+              sm:h-[480px] md:h-[520px]
               sm:max-h-[calc(100vh-8rem)]
               bg-alien-space-dark/98 backdrop-blur-xl 
               sm:border-2 border-alien-gold/40 sm:rounded-2xl 
@@ -91,10 +160,20 @@ const AIChatbot = () => {
                   </h3>
                   <p className="text-xs text-alien-green font-exo">AI Tor</p>
                 </div>
-                {/* Status indicator */}
+                {/* Status indicator with typing animation when loading */}
                 <div className="flex items-center gap-1.5 ml-2">
-                  <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>
+                  {isLoading ? (
+                    <div className="flex items-center gap-1">
+                      <span className="typing-dot" />
+                      <span className="typing-dot" style={{ animationDelay: '0.2s' }} />
+                      <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>
+                    </>
+                  )}
                 </div>
               </div>
               <button
@@ -127,10 +206,11 @@ const AIChatbot = () => {
                     <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">Loading AI Tor...</p>
-                  <div className="flex gap-1 mt-3">
-                    <span className="w-2 h-2 bg-alien-gold rounded-full animate-bounce" style={{ animationDelay: '0ms' }} />
-                    <span className="w-2 h-2 bg-alien-gold rounded-full animate-bounce" style={{ animationDelay: '150ms' }} />
-                    <span className="w-2 h-2 bg-alien-gold rounded-full animate-bounce" style={{ animationDelay: '300ms' }} />
+                  {/* Typing indicator animation */}
+                  <div className="flex gap-1.5 mt-3">
+                    <span className="typing-dot-lg" />
+                    <span className="typing-dot-lg" style={{ animationDelay: '0.15s' }} />
+                    <span className="typing-dot-lg" style={{ animationDelay: '0.3s' }} />
                   </div>
                 </motion.div>
               )}

src/components/AdBanner.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface AdBannerProps {
+  position: 'horizontal' | 'vertical' | 'square';
+  className?: string;
+  adSlotId?: string;
+}
+
+const AD_SIZES = {
+  horizontal: { width: 728, height: 90, label: '728x90' },
+  vertical: { width: 160, height: 600, label: '160x600' },
+  square: { width: 300, height: 250, label: '300x250' }
+};
+
+const AdBanner: React.FC<AdBannerProps> = ({ 
+  position = 'horizontal',
+  className = '',
+  adSlotId
+}) => {
+  const size = AD_SIZES[position];
+
+  // Placeholder for Google AdSense or other ad network
+  // Replace with actual ad code when ad account is set up
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      className={`flex items-center justify-center ${className}`}
+    >
+      <div 
+        className="bg-alien-space-dark/50 border border-alien-gold/20 rounded-lg 
+          flex items-center justify-center text-muted-foreground/50 font-exo text-xs
+          hover:border-alien-gold/40 transition-colors"
+        style={{ 
+          width: position === 'horizontal' ? '100%' : size.width,
+          maxWidth: size.width,
+          height: size.height,
+          minHeight: size.height
+        }}
+      >
+        {adSlotId ? (
+          // Placeholder for actual ad script
+          <div 
+            id={adSlotId}
+            className="w-full h-full flex items-center justify-center"
+          >
+            {/* Google AdSense script would go here */}
+            <span className="text-center">
+              Ad Space<br/>
+              <span className="text-alien-gold/50">{size.label}</span>
+            </span>
+          </div>
+        ) : (
+          <span className="text-center">
+            Ad Space<br/>
+            <span className="text-alien-gold/50">{size.label}</span>
+          </span>
+        )}
+      </div>
+    </motion.div>
+  );
+};
+
+export default AdBanner;

src/components/DAODashboard.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Users, TrendingUp, FileText, Clock, CheckCircle, XCircle, RefreshCw } from 'lucide-react';
+import { Users, TrendingUp, FileText, Clock, CheckCircle, XCircle, RefreshCw, ExternalLink } from 'lucide-react';
 import { PieChart, Pie, Cell, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Legend } from 'recharts';
 
 type Proposal = {
@@ -16,6 +16,22 @@ type Proposal = {
 const DAODashboard: React.FC = () => {
   const [lastUpdate, setLastUpdate] = useState(new Date());
 
+  // AlienFlowSpace DAOs on Polygon
+  const DAOS = [
+    {
+      name: 'AlienFlowSpace DAO',
+      address: '0xCA497d631DB260ebFFF4bA71AEAc3201ae972a77',
+      url: 'https://app.aragon.org/dao/polygon-mainnet/0xCA497d631DB260ebFFF4bA71AEAc3201ae972a77/dashboard',
+      token: '$AFS'
+    },
+    {
+      name: 'Alien69Flow DAO',
+      address: '0x2A1F32A807b3f8a43F9473C1FA7d11881A579b16',
+      url: 'https://app.aragon.org/dao/polygon-mainnet/0x2A1F32A807b3f8a43F9473C1FA7d11881A579b16/dashboard',
+      token: '$A69F'
+    }
+  ];
+
   // Mock data - In production, fetch from blockchain
   const [stats] = useState({
     activeVoters: 1618033,
@@ -25,10 +41,10 @@ const DAODashboard: React.FC = () => {
   });
 
   const [treasury] = useState([
-    { name: 'BTC', value: 123456789, change: 3.3, color: '#F7931A' },
-    { name: 'ETH', value: 33456789, change: -1.2, color: '#627EEA' },
-    { name: 'USDC', value: 850000, change: 0, color: '#2775CA' },
-    { name: 'Other', value: 95000, change: 2.3, color: '#22C55E' }
+    { name: 'MATIC', value: 50000, change: 2.5, color: '#8247E5' },
+    { name: '$AFS', value: 1000000, change: 5.2, color: '#22C55E' },
+    { name: '$A69F', value: 500000, change: 3.8, color: '#F0D882' },
+    { name: 'USDC', value: 25000, change: 0, color: '#2775CA' }
   ]);
 
   const [proposals] = useState<Proposal[]>([
@@ -82,13 +98,27 @@ const DAODashboard: React.FC = () => {
             Last updated: {lastUpdate.toLocaleTimeString()}
           </p>
         </div>
-        <Button
-          onClick={handleRefresh}
-          className="bg-alien-gold/20 hover:bg-alien-gold/30 text-alien-gold border border-alien-gold/50"
-        >
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh Data
-        </Button>
+        <div className="flex gap-2 flex-wrap">
+          {DAOS.map((dao) => (
+            <Button
+              key={dao.address}
+              onClick={() => window.open(dao.url, '_blank')}
+              className="bg-alien-gold/20 hover:bg-alien-gold/30 text-alien-gold border border-alien-gold/50 text-xs"
+              size="sm"
+            >
+              <ExternalLink className="h-3 w-3 mr-1" />
+              {dao.name}
+            </Button>
+          ))}
+          <Button
+            onClick={handleRefresh}
+            className="bg-alien-green/20 hover:bg-alien-green/30 text-alien-green border border-alien-green/50"
+            size="sm"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </Button>
+        </div>
       </div>
 
       {/* Stats Grid */}