Fix loading and polish pages

Inline loading screen; added responsive polish to Academy, Clubs, and CoNetWorKing:
- LoadingScreen now inline with spinner to avoid blocking UI
- Academy: enhanced module cards with subtle animation and blur
- Clubs: added staggered entry animations, search/icon, and improved filters
- CoNetWorKing: added section animations for improved flow
- Updated Club cards to pass index for animations

X-Lovable-Edit-ID: edt-65477cdb-7460-4afa-a8d6-c6a7834bd110
Co-authored-by: Alien69Flow <111972684+Alien69Flow@users.noreply.github.com>

Author: lovable-dev[bot]

.lovable/plan.md

@@ -1,40 +1,2 @@
 
-# Fix Loading Issues + Modest UI Polish for Academy, Clubs, CoNetWorKing
-
-## Root Cause of Loading Issue
-
-The `LoadingScreen` component is **full-screen with `fixed inset-0 z-[99999]`**, covering the entire viewport. When used in `Suspense` fallback for 8 lazy components, it blocks the UI forever as each component triggers this overlay.
-
-## Solution
-
-### 1. Fix LoadingScreen (`src/components/LoadingScreen.tsx`)
-Replace full-screen takeover with a lightweight inline skeleton:
-- Remove `fixed inset-0` positioning
-- Simple centered spinner with logo pulse
-- No z-index override — fits naturally in layout
-
-### 2. Academy Page Polish (`src/pages/Academy.tsx`)
-Modest improvements, keeping readability:
-- Standardize card backgrounds to `bg-black/50 backdrop-blur-md` (not heavy blur)
-- Add subtle `hover:border-alien-gold/50` transitions
-- Keep existing structure — no major layout changes
-
-### 3. Clubs Page Polish (`src/pages/Clubs.tsx`)
-- Add `motion.div` entry animations to club cards (staggered fade-in)
-- Standardize search bar styling with subtle border glow
-- Category filter pills with active state highlight
-
-### 4. CoNetWorKing Page Polish (`src/pages/CoNetWorKing.tsx`)
-- Add section header animations (slide up on scroll)
-- Partner cards with subtle scale hover effect
-- Service cards already have hover effects — keep them
-
-## Files Changed
-| File | Change |
-|------|--------|
-| `src/components/LoadingScreen.tsx` | Inline spinner (fix blocking issue) |
-| `src/pages/Academy.tsx` | Card hover polish |
-| `src/pages/Clubs.tsx` | Entry animations, filter styling |
-| `src/pages/CoNetWorKing.tsx` | Section animations |
-
-All changes use existing dependencies. No heavy glass effects — prioritizing readability and responsiveness.
+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/LoadingScreen.tsx

@@ -1,103 +1,54 @@
 import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 const LoadingScreen = () => {
   return (
-    <motion.div 
-      initial={{ opacity: 1 }}
-      exit={{ opacity: 0, filter: "brightness(3) blur(20px)", scale: 1.5 }}
-      transition={{ duration: 0.8, ease: "circIn" }}
-      className="fixed inset-0 bg-[#050505] z-[99999] flex items-center justify-center overflow-hidden"
-    >
-      {/* 1. EFECTO HIPERESPACIO (Estrellas cinéticas) */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
-        {[...Array(20)].map((_, i) => (
-          <motion.div
-            key={i}
-            initial={{ opacity: 0, scale: 0, x: 0, y: 0 }}
-            animate={{ 
-              opacity: [0, 1, 0], 
-              scale: [0, 1.5], 
-              x: (Math.random() - 0.5) * 1000, 
-              y: (Math.random() - 0.5) * 1000 
-            }}
-            transition={{ 
-              duration: 2, 
-              repeat: Infinity, 
-              delay: i * 0.1, 
-              ease: "easeIn" 
-            }}
-            className="absolute top-1/2 left-1/2 w-1 h-1 bg-alien-green rounded-full shadow-[0_0_10px_#39FF14]"
-          />
-        ))}
-      </div>
-
-      <div className="relative z-10 text-center">
-        {/* 2. RADAR CUÁNTICO (Anillos de energía) */}
+    <div className="w-full min-h-[60vh] flex items-center justify-center bg-transparent">
+      <div className="relative text-center">
+        {/* Pulse rings around logo */}
         <div className="relative flex items-center justify-center">
-          {[...Array(3)].map((_, i) => (
+          {[...Array(2)].map((_, i) => (
             <motion.div
               key={i}
               animate={{ 
-                scale: [1, 2.5], 
-                opacity: [0.5, 0],
-                borderWidth: ["2px", "1px"]
+                scale: [1, 2], 
+                opacity: [0.4, 0]
               }}
-              transition={{ duration: 2, repeat: Infinity, delay: i * 0.6 }}
-              className="absolute w-32 h-32 border-alien-gold/40 rounded-full"
+              transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.5 }}
+              className="absolute w-20 h-20 border border-alien-gold/30 rounded-full"
             />
           ))}
 
-          {/* 3. LOGO: MOTOR DE CURVATURA (Efecto Latido) */}
+          {/* Logo with pulse effect */}
           <motion.div
             animate={{ 
               scale: [1, 1.05, 1],
               filter: [
-                "drop-shadow(0 0 10px #F0D882)",
-                "drop-shadow(0 0 30px #39FF14)",
-                "drop-shadow(0 0 10px #F0D882)"
+                "drop-shadow(0 0 8px rgba(240,216,130,0.3))",
+                "drop-shadow(0 0 16px rgba(57,255,20,0.4))",
+                "drop-shadow(0 0 8px rgba(240,216,130,0.3))"
               ]
             }}
-            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-            className="relative"
+            transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
           >
             <img 
               src="/lovable-uploads/ALogo.png" 
-              alt="AlienFlow Logo" 
-              className="w-40 h-40 object-contain relative z-20" 
+              alt="Loading..." 
+              className="w-16 h-16 object-contain" 
             />
           </motion.div>
         </div>
 
-        {/* 4. DATOS DEL SISTEMA (Año 4700 / Estética Terminal) */}
-        <div className="mt-12 space-y-2">
-          <motion.div
-            animate={{ opacity: [0, 1, 0.5, 1] }}
-            transition={{ duration: 0.1, repeat: Infinity, repeatType: "mirror" }}
-            className="text-alien-green font-nasalization text-[10px] tracking-[0.6em] uppercase"
-          >
-            Quantum Jump Initiated...
-          </motion.div>
-          
-          <div className="flex flex-col gap-1">
-            <span className="text-alien-gold/60 font-exo text-[9px] tracking-widest uppercase">
-              Timeline: Era 4700 | Galactic-Standard
-            </span>
-            <div className="flex justify-center gap-1.5 mt-2">
-              <motion.div 
-                className="h-[2px] bg-alien-green shadow-[0_0_8px_#39FF14]"
-                animate={{ width: ["0%", "100%", "0%"] }}
-                transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
-                style={{ width: "120px" }}
-              />
-            </div>
-          </div>
-        </div>
+        {/* Loading text */}
+        <motion.p
+          animate={{ opacity: [0.5, 1, 0.5] }}
+          transition={{ duration: 1.5, repeat: Infinity }}
+          className="mt-6 text-alien-gold/70 text-xs tracking-[0.3em] uppercase font-mono"
+        >
+          Loading...
+        </motion.p>
       </div>
-
-      {/* 5. EFECTO SCANLINE (Capa final de textura) */}
-      <div className="absolute inset-0 bg-scanlines opacity-[0.03] pointer-events-none" />
-    </motion.div>
+    </div>
   );
 };
 

src/pages/Academy.tsx

@@ -231,7 +231,11 @@ const Academy = () => {
           <motion.div 
             key={module.id}
             layout
-            className="flex flex-col bg-black/40 backdrop-blur-2xl rounded-[2.5rem] border border-white/10 hover:border-alien-gold/40 transition-all duration-300 shadow-2xl relative overflow-hidden group hover:scale-[1.01]"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: module.id * 0.1 }}
+            className="flex flex-col bg-black/50 backdrop-blur-md rounded-[2.5rem] border border-white/10 hover:border-alien-gold/50 transition-all duration-300 shadow-2xl relative overflow-hidden group hover:scale-[1.01]"
           >
             <div 
               onClick={() => setExpandedModule(expandedModule === module.id ? null : module.id)}

src/pages/Clubs.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import FeaturedClubCard from '@/components/FeaturedClubCard';
 import EcoProductCarousel from '@/components/EcoProductCarousel';
-import { Users, Rocket, Calendar, Zap, Shield, DollarSign, Leaf, Gamepad2, Music, Heart, Eye, Dna, Database, FlaskConical } from 'lucide-react';
+import { Users, Rocket, Calendar, Zap, Shield, DollarSign, Leaf, Gamepad2, Music, Heart, Eye, Dna, Database, FlaskConical, Search } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
 type ClubProps = {
@@ -14,13 +15,18 @@ type ClubProps = {
   bgColor: string;
 };
 
-const ClubCard = ({ club }: { club: ClubProps }) => (
-  <div className={`${club.bgColor} p-6 rounded-xl backdrop-blur-md overflow-hidden relative group hover:transform hover:scale-[1.02] transition-all duration-300 border border-alien-gold/20 hover:border-alien-gold/40`}>
+const ClubCard = ({ club, index }: { club: ClubProps; index: number }) => (
+  <motion.div 
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.4, delay: index * 0.08 }}
+    className={`${club.bgColor} p-6 rounded-xl backdrop-blur-md overflow-hidden relative group hover:scale-[1.02] transition-all duration-300 border border-alien-gold/20 hover:border-alien-gold/50`}
+  >
     <div className="absolute inset-0 bg-gradient-to-b from-transparent via-alien-space-dark/60 to-alien-space-dark/90 z-0"></div>
 
     <div className="relative z-10">
       <div className="flex justify-between items-start mb-6">
-        <div className="p-4 bg-alien-space-dark/80 rounded-xl backdrop-blur-md border border-alien-gold/30 group-hover:border-alien-gold/50 transition-all duration-300">
+        <div className="p-4 bg-black/50 rounded-xl backdrop-blur-md border border-alien-gold/30 group-hover:border-alien-gold/50 transition-all duration-300">
           {club.icon}
         </div>
         <span className={`px-3 py-1 text-xs ${club.categoryColor} rounded-full font-medium backdrop-blur-sm`}>
@@ -36,7 +42,7 @@ const ClubCard = ({ club }: { club: ClubProps }) => (
       </p>
 
       <div className="flex justify-between items-center">
-        <div className="flex items-center bg-alien-space-dark/60 px-3 py-2 rounded-full backdrop-blur-sm">
+        <div className="flex items-center bg-black/50 px-3 py-2 rounded-full backdrop-blur-sm">
           <Users className="h-4 w-4 text-alien-green mr-2" />
           <span className="text-sm text-alien-green font-medium">
             {club.members.toLocaleString()} members
@@ -47,7 +53,7 @@ const ClubCard = ({ club }: { club: ClubProps }) => (
         </Button>
       </div>
     </div>
-  </div>
+  </motion.div>
 );
 
 const Clubs: React.FC = () => {
@@ -607,23 +613,29 @@ const Clubs: React.FC = () => {
           </div>
 
           {/* Search & Filter Bar */}
-          <div className="mb-12 space-y-4">
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="mb-12 space-y-4"
+          >
             <div className="relative max-w-md mx-auto">
+              <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-alien-gold/50" />
               <input
                 type="text"
                 placeholder="Search clubs..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full px-5 py-3 bg-alien-space-dark/80 backdrop-blur-md border border-alien-gold/30 rounded-full text-alien-gold placeholder:text-alien-gold/40 font-exo focus:outline-none focus:border-alien-green/60 focus:ring-1 focus:ring-alien-green/30 transition-all"
+                className="w-full pl-11 pr-5 py-3 bg-black/50 backdrop-blur-md border border-alien-gold/30 rounded-full text-alien-gold placeholder:text-alien-gold/40 font-exo focus:outline-none focus:border-alien-green/60 focus:ring-1 focus:ring-alien-green/30 focus:shadow-[0_0_15px_rgba(57,255,20,0.15)] transition-all"
               />
             </div>
             <div className="flex flex-wrap justify-center gap-2">
               <button
                 onClick={() => setActiveCategory(null)}
                 className={`px-3 py-1.5 rounded-full text-xs font-nasalization transition-all border ${
                   !activeCategory
-                    ? 'bg-alien-green/20 border-alien-green/60 text-alien-green'
-                    : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40'
+                    ? 'bg-alien-green/20 border-alien-green/60 text-alien-green shadow-[0_0_10px_rgba(57,255,20,0.2)]'
+                    : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40 hover:bg-alien-gold/5'
                 }`}
               >
                 All
@@ -634,15 +646,15 @@ const Clubs: React.FC = () => {
                   onClick={() => setActiveCategory(activeCategory === cat ? null : cat)}
                   className={`px-3 py-1.5 rounded-full text-xs font-nasalization transition-all border ${
                     activeCategory === cat
-                      ? 'bg-alien-green/20 border-alien-green/60 text-alien-green'
-                      : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40'
+                      ? 'bg-alien-green/20 border-alien-green/60 text-alien-green shadow-[0_0_10px_rgba(57,255,20,0.2)]'
+                      : 'border-alien-gold/20 text-alien-gold/60 hover:border-alien-gold/40 hover:bg-alien-gold/5'
                   }`}
                 >
                   {cat}
                 </button>
               ))}
             </div>
-          </div>
+          </motion.div>
 
           {filteredFeatured.length > 0 && (
             <section id="featured" className="mb-16">
@@ -664,7 +676,7 @@ const Clubs: React.FC = () => {
               </h2>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 {filteredOther.map((club, index) => (
-                  <ClubCard key={index} club={club} />
+                  <ClubCard key={index} club={club} index={index} />
                 ))}
               </div>
             </section>

src/pages/CoNetWorKing.tsx

@@ -28,22 +28,33 @@ type PartnerSectionProps = {
 };
 
 const ServiceCard = ({
-  service
+  service,
+  index
 }: {
   service: ServiceProps;
-}) => <Card className="bg-alien-space-dark/70 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:scale-105">
-    <CardHeader className="text-center">
-      <div className={`mx-auto mb-4 p-3 rounded-full ${service.color}`}>
-        {service.icon}
-      </div>
-      <CardTitle className="text-alien-gold font-nasalization text-xl">{service.title}</CardTitle>
-    </CardHeader>
-    <CardContent>
-      <CardDescription className="text-gray-300 font-[Exo] text-center leading-relaxed">
-        {service.description}
-      </CardDescription>
-    </CardContent>
-  </Card>;
+  index: number;
+}) => (
+  <motion.div
+    initial={{ opacity: 0, y: 30 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true }}
+    transition={{ duration: 0.4, delay: index * 0.05 }}
+  >
+    <Card className="bg-black/50 backdrop-blur-md border border-alien-gold/30 hover:border-alien-gold/50 transition-all duration-300 hover:scale-[1.02]">
+      <CardHeader className="text-center">
+        <div className={`mx-auto mb-4 p-3 rounded-full ${service.color}`}>
+          {service.icon}
+        </div>
+        <CardTitle className="text-alien-gold font-nasalization text-xl">{service.title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <CardDescription className="text-gray-300 font-[Exo] text-center leading-relaxed">
+          {service.description}
+        </CardDescription>
+      </CardContent>
+    </Card>
+  </motion.div>
+);
 
 const PartnerSection: React.FC<PartnerSectionProps> = ({ title, partners, color, icon, delay = 0 }) => {
   const getColorClasses = () => {
@@ -545,7 +556,7 @@ const CoNetWorKing: React.FC = () => {
               DAO | DAPP | DEX
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {services.map((service, index) => <ServiceCard key={index} service={service} />)}
+              {services.map((service, index) => <ServiceCard key={index} service={service} index={index} />)}
             </div>
           </div>