Enhance header apps buttons

lovable-dev[bot] · Alien69Flow · lovable-dev[bot] · commit a341d6f24431 · 2026-03-08T21:40:32.000Z
Move AGameFlow and AlienTrip buttons into header, remove APPS from nav, fix Academy logos and categories, and adjust wallet config guidance

- Added AGameFlow and AlienTrip icon buttons beside wallet/portal in header
- Removed APPS section from DesktopNav and MobileNav dropdowns
- Cleaned and improved Academy partners logos/categories with fallbacks
- Updated Academy partner rendering to rely on logos with onError handling
- Provided guidance for wallet origin whitelisting configuration (external action)

X-Lovable-Edit-ID: edt-a7bcf816-352a-451a-980b-6860f1227fa3
Co-authored-by: Alien69Flow &lt;111972684+Alien69Flow@users.noreply.github.com&gt;
diff --git a/.lovable/plan.md b/.lovable/plan.md
@@ -1,49 +1,2 @@
 
-
-# Plan: Fix Navigation, Apps Buttons, Academy Partners & Wallet Config
-
-## Issues Found
-
-1. **AlienTrip missing from DesktopNav** — It was removed from `navLinks` in DesktopNav (only exists inside the APPS dropdown). MobileNav still has it in navLinks.
-
-2. **Apps placement** — You want AGameFlow and AlienTrip as icon buttons next to the wallet/portal buttons in the header bar (ConnectButton area), not inside the Explore Spaces dropdown.
-
-3. **Academy partners** — Some logos use external URLs that may be broken (CORS), HEALTHFLOW partners use Lucide fallback icons instead of real logos. Categories can be improved.
-
-4. **Wallet "Invalid App Configuration"** — The console shows `WebSocket connection closed abnormally with code: 3000 (Unauthorized: origin not allowed)`. This means the Reown/WalletConnect project (ID: `ced40e4d52234c471808977208586c7e`) does not have the Lovable preview domain (`*.lovable.app` / `*.lovableproject.com`) whitelisted in its allowed origins. **This must be fixed in the Reown Cloud dashboard** at https://cloud.reown.com — you need to add these domains to the project's allowed origins:
-   - `alienflowspace.lovable.app`
-   - `*.lovableproject.com`
-   - `id-preview--83ea2c39-5424-4ac2-b26f-e00df7bb6c06.lovable.app`
-
-## Changes
-
-### 1. `src/components/Header/ConnectButton.tsx`
-Add two new icon buttons (AGameFlow + AlienTrip) next to the existing wallet and portal buttons:
-- **AGameFlow** → external link to `https://agameflow.lovable.app` with Gamepad2 icon
-- **AlienTrip** → external link to `https://alientrip.lovable.app` with Rocket icon
-- Same circular button styling as wallet/portal buttons
-
-### 2. `src/components/Header/DesktopNav.tsx`
-- Remove the APPS section from the Explore Spaces dropdown (keep only Academy, Clubs, CoNetWorKing)
-- Remove the `DropdownMenuSeparator` and apps rendering code
-
-### 3. `src/components/Header/MobileNav.tsx`
-- Remove the APPS section from inside the Explore Spaces accordion
-- Keep AlienTrip in main navLinks (it's already there)
-
-### 4. `src/pages/Academy.tsx` — Partners cleanup
-- Fix HEALTHFLOW: remove partners without real logos (Meslo Ltd, Motus DAO, My DNA Bank) or replace with verifiable partners that have real logos
-- Remove external Wikipedia URLs for logos (CORS issues) — use text-based fallbacks or verified local assets
-- Ensure all categories have correct partner assignments
-
-### 5. Wallet fix
-- **User action required**: Go to https://cloud.reown.com, open project `ced40e4d52234c471808977208586c7e`, and add the Lovable domains to allowed origins. This cannot be fixed from code.
-
-## Files Modified
-| File | Change |
-|------|--------|
-| `src/components/Header/ConnectButton.tsx` | Add AGameFlow + AlienTrip icon buttons |
-| `src/components/Header/DesktopNav.tsx` | Remove APPS section from dropdown |
-| `src/components/Header/MobileNav.tsx` | Remove APPS section from accordion |
-| `src/pages/Academy.tsx` | Fix broken partner logos, clean categories |
-
+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.
diff --git a/src/components/Header/ConnectButton.tsx b/src/components/Header/ConnectButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@/components/ui/button';
 import { useAppKit } from '@reown/appkit/react';
-import { Copy, CheckCircle } from 'lucide-react';
+import { Copy, CheckCircle, Gamepad2, Rocket } from 'lucide-react';
 import { useWalletConnection } from '@/hooks/useWalletConnection';
 import { toast } from 'sonner';
 
@@ -28,7 +28,39 @@ const ConnectButton = () => {
   };
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-2 sm:gap-3">
+      {/* App Buttons */}
+      <a
+        href="https://agameflow.lovable.app"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="no-underline"
+        title="ACE AGameFlow"
+        aria-label="ACE AGameFlow"
+      >
+        <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-300 hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold"
+          type="button"
+        >
+          <Gamepad2 className={`${ICON_SIZE}`} />
+        </Button>
+      </a>
+      <a
+        href="https://alientrip.lovable.app"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="no-underline"
+        title="AlienTrip"
+        aria-label="AlienTrip"
+      >
+        <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-300 hover:shadow-lg hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-alien-gold"
+          type="button"
+        >
+          <Rocket className={`${ICON_SIZE}`} />
+        </Button>
+      </a>
+
       {isConnected && address ? (
         <>
           {/* Connected state: address + optional AI key copy + manage */}
diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Globe, ChevronDown, Sparkles, Gamepad2, Rocket } from 'lucide-react';
+import { Globe, ChevronDown, Sparkles } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,6 +17,7 @@ const DesktopNav = () => {
 
   const navLinks = [
     { to: "/about", label: "About" },
+    { to: "/alien-trip", label: "AlienTrip" },
     { to: "/contact", label: "Contact" }
   ];
 
@@ -26,11 +27,6 @@ const DesktopNav = () => {
     { to: "/conetworking", label: "CoNetWorKing", desc: "Connect with like-minded profits across the multiverse" }
   ].sort((a, b) => a.label.localeCompare(b.label));
 
-  const appLinks = [
-    { href: "https://t.me/AlienFlowBot", label: "ACE AGameFlow", desc: "Telegram MiniApp — Play & Earn in the multiverse", icon: Gamepad2, external: true },
-    { to: "/alien-trip", label: "AlienTrip", desc: "Explore the cosmic journey experience", icon: Rocket, external: false }
-  ];
-
   const languages = [
     { code: 'us', name: 'English', lang: 'en' },
     { code: 'es', name: 'Español', lang: 'es' },
@@ -96,45 +92,6 @@ const DesktopNav = () => {
             </DropdownMenuItem>
           ))}
 
-          <DropdownMenuSeparator className="bg-white/10 my-2" />
-          
-          <div className="px-4 py-1">
-            <span className="text-[9px] font-nasalization text-alien-gold/50 tracking-[0.3em] uppercase">Apps</span>
-          </div>
-
-          {appLinks.map((app) => (
-            <DropdownMenuItem key={app.label} asChild>
-              {app.external ? (
-                <a
-                  href={app.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-3 p-4 rounded-xl hover:bg-alien-green/10 group transition-all"
-                >
-                  <app.icon className="w-5 h-5 text-alien-gold group-hover:text-alien-green transition-colors" />
-                  <div>
-                    <h3 className="text-alien-gold group-hover:text-alien-green font-nasalization text-sm transition-colors">
-                      {app.label}
-                    </h3>
-                    <p className="text-[10px] text-gray-400 leading-relaxed mt-0.5">{app.desc}</p>
-                  </div>
-                </a>
-              ) : (
-                <Link
-                  to={app.to!}
-                  className="flex items-center gap-3 p-4 rounded-xl hover:bg-alien-green/10 group transition-all"
-                >
-                  <app.icon className="w-5 h-5 text-alien-gold group-hover:text-alien-green transition-colors" />
-                  <div>
-                    <h3 className="text-alien-gold group-hover:text-alien-green font-nasalization text-sm transition-colors">
-                      {app.label}
-                    </h3>
-                    <p className="text-[10px] text-gray-400 leading-relaxed mt-0.5">{app.desc}</p>
-                  </div>
-                </Link>
-              )}
-            </DropdownMenuItem>
-          ))}
         </DropdownMenuContent>
       </DropdownMenu>
 
diff --git a/src/components/Header/MobileNav.tsx b/src/components/Header/MobileNav.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Link } from 'react-router-dom';
-import { Globe, ChevronDown, Sparkles, Gamepad2, Rocket } from 'lucide-react';
+import { Globe, ChevronDown, Sparkles } from 'lucide-react';
 import ConnectButton from '@/components/Header/ConnectButton';
 import { translateTo } from '@/lib/translator';
 
@@ -103,34 +103,6 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
                     </Link>
                   ))}
 
-                  {/* APPS Section */}
-                  <div className="border-t border-white/10 mt-2 pt-2">
-                    <span className="text-[9px] font-nasalization text-alien-gold/50 tracking-[0.3em] uppercase px-4 block mb-2">Apps</span>
-                    <a
-                      href="https://t.me/AlienFlowBot"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-3 p-4 border-b border-white/5 hover:bg-alien-green/10"
-                      onClick={() => setIsMenuOpen(false)}
-                    >
-                      <Gamepad2 className="w-5 h-5 text-alien-gold" />
-                      <div>
-                        <h4 className="text-alien-gold font-nasalization text-sm">ACE AGameFlow</h4>
-                        <p className="text-[10px] text-gray-500 mt-1">Telegram MiniApp — Play & Earn</p>
-                      </div>
-                    </a>
-                    <Link
-                      to="/alien-trip"
-                      className="flex items-center gap-3 p-4 hover:bg-alien-green/10"
-                      onClick={() => setIsMenuOpen(false)}
-                    >
-                      <Rocket className="w-5 h-5 text-alien-gold" />
-                      <div>
-                        <h4 className="text-alien-gold font-nasalization text-sm">AlienTrip</h4>
-                        <p className="text-[10px] text-gray-500 mt-1">Cosmic journey experience</p>
-                      </div>
-                    </Link>
-                  </div>
                 </motion.div>
               )}
             </AnimatePresence>
diff --git a/src/pages/Academy.tsx b/src/pages/Academy.tsx
@@ -2,12 +2,11 @@ import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   ShieldCheck, Coins, Leaf, Brain, GraduationCap, 
-  Zap, ExternalLink, ChevronDown, Award, CheckCircle2,
-  Heart, Activity, Dna
+  Zap, ExternalLink, ChevronDown, Award, CheckCircle2
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 
-const LUCIDE_ICON_MAP: Record<string, React.ElementType> = { Heart, Activity, Dna };
+
 
 // --- DATA DEFINITIVA: 3 MÓDULOS CON 4 BLOQUES CADA UNO ---
 const academyModules = [
@@ -104,11 +103,8 @@ const partnerCategories = [
   { 
     label: 'HEALTHFLOW', 
     partners: [
-      { name: "Meslo Ltd", url: "https://meslo.com/", logo: "", lucideIcon: "Heart" },
-      { name: "Motus DAO", url: "https://motusdao.io/", logo: "", lucideIcon: "Activity" },
-      { name: "My DNA Bank", url: "https://mydnabank.com/", logo: "", lucideIcon: "Dna" },
       { name: "Proton", url: "https://proton.me/", logo: "https://upload.wikimedia.org/wikipedia/commons/4/4a/Proton_Technologies_AG_logo.svg" },
-      { name: "Yazio", url: "https://www.yazio.com/", logo: "https://upload.wikimedia.org/wikipedia/commons/5/5c/YAZIO_Logo.svg" }
+      { name: "WHO", url: "https://www.who.int/", logo: "https://upload.wikimedia.org/wikipedia/commons/2/26/World_Health_Organization_Logo.svg" }
     ] 
   },
   { 
@@ -304,19 +300,15 @@ const Academy = () => {
                     className="flex items-center gap-3 group hover:scale-[1.01] transition-all duration-300"
                   >
                     <div className="w-10 h-10 md:w-11 md:h-11 rounded-xl bg-white/5 p-1.5 border border-white/10 group-hover:border-alien-green/50 group-hover:bg-alien-green/10 transition-all duration-300 flex items-center justify-center overflow-hidden">
-                      {(p as any).lucideIcon && LUCIDE_ICON_MAP[(p as any).lucideIcon] ? (
-                        (() => { const Icon = LUCIDE_ICON_MAP[(p as any).lucideIcon]; return <Icon className="w-6 h-6 text-gray-400 group-hover:text-alien-green transition-colors duration-300" />; })()
-                      ) : (
-                        <img 
-                          src={p.logo} 
-                          alt={p.name} 
-                          className="w-full h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-500 scale-90 group-hover:scale-100"
-                          onError={(e) => { 
-                            e.currentTarget.style.opacity = '0.3'; 
-                            e.currentTarget.style.filter = 'none';
-                          }} 
-                        />
-                      )}
+                      <img 
+                        src={p.logo} 
+                        alt={p.name} 
+                        className="w-full h-full object-contain grayscale group-hover:grayscale-0 transition-all duration-500 scale-90 group-hover:scale-100"
+                        onError={(e) => { 
+                          e.currentTarget.style.opacity = '0.3'; 
+                          e.currentTarget.style.filter = 'none';
+                        }} 
+                      />
                     </div>
                     <span className="text-[11px] md:text-[12px] text-gray-500 group-hover:text-white transition-colors duration-300 tracking-tight font-medium truncate max-w-[100px]">
                       {p.name}
