Added scroll progress indicator

Added a scroll progress bar component to the layout.

X-Lovable-Edit-ID: edt-551c5629-a7f6-4e84-9e90-ffc798828dd5
Co-authored-by: Alien69Flow <111972684+Alien69Flow@users.noreply.github.com>

Author: lovable-dev[bot]

.lovable/plan.md

@@ -1,73 +1,2 @@
 
-
-# UI/UX Improvements: Professional DAO-Grade Design
-
-After reviewing the entire codebase, here are the key improvements inspired by top-tier DAOs (Uniswap, Aave, Lido, MakerDAO) and Web3 platforms.
-
-## Priority 1: Homepage Upgrades
-
-### 1.1 Hero Section Enhancement (`src/components/Hero.tsx`)
-- Add animated gradient orbs behind the logo (like Uniswap's homepage)
-- Add a live "pulse" ring around the logo similar to Lido's staking interface
-- Improve CTA button hierarchy: primary button with gradient glow effect, secondary with outline
-- Add a subtle animated particle/star field that responds to scroll
-
-### 1.2 Stats Section Revival (`src/components/StatsSection.tsx`)
-- Currently returns `null` — restore with animated counter stats (like Aave's dashboard)
-- Show: Total Members, Countries, TVL, Proposals Passed
-- Use `framer-motion` number counter animation on scroll into view
-- Place between Hero and FinancialFreedom sections
-
-### 1.3 Explore Spaces Cards (`src/components/ExploreSpacesSection.tsx`)
-- Add glassmorphism hover effect with gradient border animation (like MakerDAO cards)
-- Add subtle icon animations on hover
-- Add a "badge" showing number of partners per space
-
-## Priority 2: Global UI Polish
-
-### 2.1 Page Transition Animations (`src/App.tsx`)
-- Wrap `<Outlet>` with `framer-motion` `AnimatePresence` for smooth page transitions (fade + slide)
-- Reference: Uniswap's smooth route transitions
-
-### 2.2 Footer Redesign (`src/components/Footer.tsx`)
-- Add a "Powered By" tech stack row (Polygon, Aragon, IPFS icons)
-- Add gradient separator line at top (gold → green)
-- Improve social icons with hover tooltip labels
-
-### 2.3 Scroll Progress Indicator
-- Add a thin gradient progress bar at the very top of the viewport (gold → green)
-- Shows how far the user has scrolled — common in premium sites (Medium, Linear)
-- New component: `src/components/ScrollProgress.tsx`
-
-## Priority 3: Page-Specific Improvements
-
-### 3.1 About Page (`src/pages/About.tsx`)
-- Add a "Team/DAO Structure" visual section with connected nodes diagram (like constellation)
-- Improve the Web technologies section with a horizontal timeline instead of stacked cards
-
-### 3.2 Clubs Page (`src/pages/Clubs.tsx`)
-- Add a search/filter bar at the top to filter clubs by category
-- Add member count animation on scroll
-- Add "Coming Soon" badge for clubs under development
-
-### 3.3 CoNetWorKing Page (`src/pages/CoNetWorKing.tsx`)
-- Add an interactive network graph visualization header (nodes connecting = partners)
-- Currently uses `font-[Atomic Age]` which may not be loaded — standardize to Nasalization
-
-## Summary of Changes
-
-| File | Change |
-|------|--------|
-| `src/components/Hero.tsx` | Gradient orbs, pulse ring, improved CTAs |
-| `src/components/StatsSection.tsx` | Animated counter stats section |
-| `src/components/ExploreSpacesSection.tsx` | Glassmorphism cards, badges |
-| `src/components/ScrollProgress.tsx` | New scroll progress bar component |
-| `src/components/Layout.tsx` | Add ScrollProgress + page transitions |
-| `src/components/Footer.tsx` | Tech stack row, gradient separator |
-| `src/pages/About.tsx` | Timeline layout for tech sections |
-| `src/pages/Clubs.tsx` | Search/filter bar, member animations |
-| `src/pages/CoNetWorKing.tsx` | Font fix, header visual improvement |
-| `src/App.tsx` | AnimatePresence page transitions |
-
-Total: ~10 files modified, 1 new component. All improvements use existing dependencies (framer-motion, Tailwind, Lucide).
-
+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/ExploreSpacesSection.tsx

@@ -2,69 +2,101 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { Button } from './ui/button';
-const spaces = [{
-  id: 'academy',
-  title: 'Academy',
-  description: 'Unlock cosmic knowledge through comprehensive educational resources, courses, and tutorials in blockchain, finance, and sustainability.',
-  icon: <img src="/lovable-uploads/AcademyLogo.png" alt="Academy" className="h-10 w-10 object-contain" />,
-  link: '/academy'
-}, {
-  id: 'clubs',
-  title: 'Clubs',
-  description: 'Join specialized communities focused on specific interests, technologies, and missions within the AlienFlowSpace ecosystem.',
-  icon: <img src="/lovable-uploads/ClubLogo.png" alt="Clubs" className="h-10 w-10 object-contain" />,
-  link: '/clubs'
-}, {
-  id: 'conetworking',
-  title: 'CoNetWorKing',
-  description: 'Connect with like-minded individuals, projects, and initiatives across the multiverse to expand your network and opportunities.',
-  icon: <img src="/lovable-uploads/CoNetWorKingLogo.png" alt="CoNetWorKing" className="h-10 w-10 object-contain" />,
-  link: '/conetworking'
-}];
+
+const spaces = [
+  {
+    id: 'academy',
+    title: 'Academy',
+    description: 'Unlock cosmic knowledge through comprehensive educational resources, courses, and tutorials in blockchain, finance, and sustainability.',
+    icon: <img src="/lovable-uploads/AcademyLogo.png" alt="Academy" className="h-10 w-10 object-contain" />,
+    link: '/academy',
+    partners: 30,
+  },
+  {
+    id: 'clubs',
+    title: 'Clubs',
+    description: 'Join specialized communities focused on specific interests, technologies, and missions within the AlienFlowSpace ecosystem.',
+    icon: <img src="/lovable-uploads/ClubLogo.png" alt="Clubs" className="h-10 w-10 object-contain" />,
+    link: '/clubs',
+    partners: 18,
+  },
+  {
+    id: 'conetworking',
+    title: 'CoNetWorKing',
+    description: 'Connect with like-minded individuals, projects, and initiatives across the multiverse to expand your network and opportunities.',
+    icon: <img src="/lovable-uploads/CoNetWorKingLogo.png" alt="CoNetWorKing" className="h-10 w-10 object-contain" />,
+    link: '/conetworking',
+    partners: 80,
+  },
+];
+
 const ExploreSpacesSection = () => {
-  return <section className="py-24 relative overflow-hidden" data-section="explore-spaces">
+  return (
+    <section className="py-24 relative overflow-hidden" data-section="explore-spaces">
       <div className="container mx-auto px-4">
-        <motion.div initial={{
-        opacity: 0
-      }} whileInView={{
-        opacity: 1
-      }} transition={{
-        duration: 0.8
-      }} viewport={{
-        once: true
-      }} className="text-center mb-16">
-          <h2 className="text-4xl mb-4 text-alien-green drop-shadow-[0_0_30px_rgba(3,255,25,0.6)] font-nasalization font-extrabold">Explore Spaces</h2>
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl mb-4 text-alien-green drop-shadow-[0_0_30px_rgba(3,255,25,0.6)] font-nasalization font-extrabold">
+            Explore Spaces
+          </h2>
           <p className="max-w-3xl mx-auto font-bold text-alien-gold text-xl">
             Discover specialized environments designed to enhance your journey through the cosmos
           </p>
         </motion.div>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {spaces.map((space, index) => <motion.div key={space.id} initial={{
-          opacity: 0,
-          y: 20
-        }} whileInView={{
-          opacity: 1,
-          y: 0
-        }} transition={{
-          duration: 0.5,
-          delay: index * 0.2
-        }} viewport={{
-          once: true
-        }} className="card-border p-8 flex flex-col items-center text-center h-full">
-              <div className="mb-6 p-4 bg-alien-space-dark rounded-full">
-                {space.icon}
+          {spaces.map((space, index) => (
+            <motion.div
+              key={space.id}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.2 }}
+              viewport={{ once: true }}
+              className="group relative"
+            >
+              {/* Glassmorphism card */}
+              <div className="relative p-8 flex flex-col items-center text-center h-full rounded-xl bg-alien-space-dark/60 backdrop-blur-xl border border-alien-gold/20 overflow-hidden transition-all duration-500 hover:border-alien-gold/50 hover:shadow-[0_0_40px_rgba(240,216,130,0.1)]">
+                {/* Animated gradient border on hover */}
+                <div className="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
+                  style={{
+                    background: 'linear-gradient(145deg, rgba(240,216,130,0.1), rgba(34,197,94,0.1))',
+                  }}
+                />
+
+                {/* Partner badge */}
+                <div className="absolute top-4 right-4 bg-alien-green/20 text-alien-green text-xs font-nasalization px-2.5 py-1 rounded-full border border-alien-green/30 backdrop-blur-sm">
+                  {space.partners}+ partners
+                </div>
+
+                <motion.div
+                  className="mb-6 p-4 bg-alien-space-dark rounded-full border border-alien-gold/20 relative z-10"
+                  whileHover={{ scale: 1.1, rotate: 5 }}
+                  transition={{ duration: 0.3 }}
+                >
+                  {space.icon}
+                </motion.div>
+
+                <h3 className="text-2xl font-bold mb-4 text-alien-gold font-nasalization relative z-10">
+                  {space.title}
+                </h3>
+                <p className="text-gray-300 mb-8 flex-grow relative z-10">{space.description}</p>
+                <Link to={space.link} className="relative z-10">
+                  <Button className="bg-gradient-to-r from-alien-green to-alien-green-light text-alien-space-dark font-extrabold font-nasalization rounded-full px-6 hover:shadow-[0_0_20px_rgba(34,197,94,0.3)] transition-all duration-300">
+                    Enter {space.title}
+                  </Button>
+                </Link>
               </div>
-              <h3 className="text-2xl font-bold mb-4 text-alien-gold font-nasalization">{space.title}</h3>
-              <p className="text-gray-300 mb-8 flex-grow">{space.description}</p>
-              <Link to={space.link}>
-                <Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark font-extrabold text-[alien-gold-dark] text-inherit">
-                  Enter {space.title}
-                </Button>
-              </Link>
-            </motion.div>)}
+            </motion.div>
+          ))}
         </div>
       </div>
-    </section>;
+    </section>
+  );
 };
-export default ExploreSpacesSection;
+
+export default ExploreSpacesSection;

src/components/Footer.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { X, Facebook, Instagram, Mail, Disc, Send, Github, Linkedin, MessageSquare, BookOpen } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { getCurrentChineseYear } from '@/lib/chineseCalendar';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 
 const Footer = () => {
   const chineseYear = getCurrentChineseYear();
   const currentYear = new Date().getFullYear();
 
-  // 1. Redes Sociales Ordenadas Alfabéticamente
   const socialLinks = [
     { href: "https://discord.gg/alienflowspace", icon: Disc, label: "Discord", color: "#5865F2" },
     { href: "mailto:info@alienflow.space", icon: Mail, label: "Email", color: "#F0D882" },
@@ -21,7 +21,6 @@ const Footer = () => {
     { href: "https://x.com/alien69flow", icon: X, label: "X (Twitter)", color: "#1DA1F2" }
   ].sort((a, b) => a.label.localeCompare(b.label));
 
-  // 2. Navegación Ordenada Alfabéticamente (Sin duplicar Home si no quieres)
   const navLinks = [
     { to: "/about", label: "About" },
     { to: "/academy", label: "Academy" },
@@ -32,8 +31,18 @@ const Footer = () => {
     { to: "/", label: "Home" }
   ].sort((a, b) => a.label.localeCompare(b.label));
 
+  const poweredBy = [
+    { name: 'Polygon', logo: 'https://cryptologos.cc/logos/polygon-matic-logo.svg', url: 'https://polygon.technology/' },
+    { name: 'Aragon', logo: '/lovable-uploads/AragonDAOLogo.svg', url: 'https://aragon.org/' },
+    { name: 'Ethereum', logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.svg', url: 'https://ethereum.org/' },
+    { name: 'IPFS', logo: 'https://upload.wikimedia.org/wikipedia/commons/1/18/Ipfs-logo-1024-ice-text.png', url: 'https://ipfs.tech/' },
+  ];
+
   return (
-    <footer className="bg-gradient-to-br from-alien-space-dark/95 to-alien-space/90 backdrop-blur-md border-t-2 border-alien-gold/30 py-8 mt-auto relative z-30">
+    <footer className="relative bg-gradient-to-br from-alien-space-dark/95 to-alien-space/90 backdrop-blur-md border-t-0 py-8 mt-auto z-30">
+      {/* Gradient separator */}
+      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-alien-gold to-alien-green opacity-60" />
+
       <div className="container mx-auto px-4">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
 
@@ -46,13 +55,22 @@ const Footer = () => {
               Uniting diverse blockchain domains under a cosmic governance structure. 
               Building the future of decentralized finance across the multiverse.
             </p>
-            <div className="flex gap-2 pt-2 flex-wrap">
-              {socialLinks.map((social, i) => (
-                <a key={i} href={social.href} target="_blank" rel="noopener noreferrer" className="p-2 transition-all hover:scale-110 border border-alien-gold/20 rounded-lg bg-black/20" style={{ color: social.color }}>
-                  <social.icon size={18} />
-                </a>
-              ))}
-            </div>
+            <TooltipProvider delayDuration={200}>
+              <div className="flex gap-2 pt-2 flex-wrap">
+                {socialLinks.map((social, i) => (
+                  <Tooltip key={i}>
+                    <TooltipTrigger asChild>
+                      <a href={social.href} target="_blank" rel="noopener noreferrer" className="p-2 transition-all hover:scale-110 border border-alien-gold/20 rounded-lg bg-black/20 hover:bg-black/40" style={{ color: social.color }}>
+                        <social.icon size={18} />
+                      </a>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" className="bg-alien-space-dark border-alien-gold/30 text-alien-gold text-xs">
+                      {social.label}
+                    </TooltipContent>
+                  </Tooltip>
+                ))}
+              </div>
+            </TooltipProvider>
           </div>
 
           <div>
@@ -78,7 +96,26 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="border-t border-alien-gold/20 mt-8 pt-6 flex flex-col lg:flex-row justify-between items-center gap-4">
+        {/* Powered By row */}
+        <div className="mt-8 pt-6 border-t border-alien-gold/10">
+          <p className="text-center text-xs text-muted-foreground font-nasalization mb-4 uppercase tracking-widest">Powered By</p>
+          <div className="flex justify-center items-center gap-6 flex-wrap">
+            {poweredBy.map((tech) => (
+              <a
+                key={tech.name}
+                href={tech.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 opacity-50 hover:opacity-100 transition-opacity duration-300"
+              >
+                <img src={tech.logo} alt={tech.name} className="h-6 w-6 object-contain" />
+                <span className="text-xs text-muted-foreground font-nasalization hidden sm:inline">{tech.name}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="border-t border-alien-gold/10 mt-6 pt-6 flex flex-col lg:flex-row justify-between items-center gap-4">
           <p className="text-[10px] font-nasalization text-alien-green/50 uppercase tracking-widest">
             © {currentYear} AlienFlowSpace DAO • Cosmic Governance Enabled
           </p>