Fix: Improve design and functionality

lovable-dev[bot] · lovable-dev[bot] · commit 750ac11567a3 · 2025-05-09T17:11:52.000Z
- Ensure Atomic Age font and colors are applied correctly.
- Improve menu and footer design.
- Ensure all functionalities are working.
diff --git a/index.html b/index.html
@@ -9,16 +9,12 @@
     <meta name="description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />
  
     <!-- Preload Fonts for Better Performance -->
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap" as="style" />
-    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" as="style" />
+    <link rel="preload" href="https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2" as="font" type="font/woff2" crossorigin />
     
     <!-- Font Stylesheets -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />
  
-    <!-- Preload Critical Font Files -->
-    <link rel="preload" href="https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2" as="font" type="font/woff2" crossorigin />
- 
     <!-- Open Graph Meta Tags -->
     <meta property="og:title" content="AlienFlowSpace DAO | Cosmic Decentralized Governance" />
     <meta property="og:description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -16,7 +16,7 @@ const Footer = () => {
                 alt="AlienFlowSpaceDAO Logo" 
                 className="h-10 w-auto object-contain" 
               />
-              <h3 className="text-xl font-bold text-alien-gold font-[Atomic Age, Star Wars]">AlienFlowSpace</h3>
+              <h3 className="text-xl font-bold text-alien-gold font-atomic-force">AlienFlowSpace</h3>
             </div>
             <p className="text-gray-400 font-[Exo]">
               Uniting diverse blockchain domains under a cosmic governance structure.
@@ -51,7 +51,7 @@ const Footer = () => {
           
           {/* Navigation Links */}
           <div>
-            <h4 className="text-alien-gold font-semibold mb-4 font-[Atomic Age, Star Wars]">Navigation</h4>
+            <h4 className="text-alien-gold font-semibold mb-4 font-atomic-force">Navigation</h4>
             <ul className="space-y-3 text-gray-400 font-[Exo]">
               <li><Link to="/" className="hover:text-alien-green transition-colors">Home</Link></li>
               <li><Link to="/about" className="hover:text-alien-green transition-colors">About</Link></li>
@@ -65,7 +65,7 @@ const Footer = () => {
           
           {/* Legal */}
           <div>
-            <h4 className="text-alien-gold font-semibold mb-4 font-[Atomic Age, Star Wars]">Legal</h4>
+            <h4 className="text-alien-gold font-semibold mb-4 font-atomic-force">Legal</h4>
             <ul className="space-y-3 text-gray-400 font-[Exo]">
               <li><a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="hover:text-alien-green transition-colors">Terms of Service</a></li>
               <li><a href="https://alienflowspace.gitbook.io/DAO" target="_blank" rel="noopener noreferrer" className="hover:text-alien-green transition-colors">Privacy Policy</a></li>
diff --git a/src/components/Header/ConnectButton.tsx b/src/components/Header/ConnectButton.tsx
@@ -4,13 +4,13 @@ import { Button } from '@/components/ui/button';
 
 const ConnectButton = () => {
   return (
-    <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold alien-logo-text rounded-full flex items-center gap-2">
+    <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold font-atomic-force rounded-full flex items-center gap-2 py-1 px-3 sm:px-4">
       <img 
         src="/lovable-uploads/AW.png" 
         alt="Wallet" 
-        className="h-6 w-6 rounded-full" 
+        className="h-5 w-5 sm:h-6 sm:w-6 rounded-full" 
       />
-      Connect Portal
+      <span className="alien-logo-text">Connect Portal</span>
     </Button>
   );
 };
diff --git a/src/components/Header/DesktopNav.tsx b/src/components/Header/DesktopNav.tsx
@@ -34,7 +34,7 @@ const DesktopNav = () => {
               variant="ghost" 
               className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/30 px-2 py-2 rounded flex items-center group alien-logo-text"
             >
-              Explore Spaces
+              <span className="alien-logo-text">Explore Spaces</span>
               <ChevronDown 
                 className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180 group-hover:text-alien-green" 
               />
@@ -50,7 +50,7 @@ const DesktopNav = () => {
                   className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
                 >
                   <div className="flex-1">
-                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 alien-logo-text">Academy</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-atomic-force">Academy</h3>
                     <p className="text-sm text-gray-400">Unlock cosmic knowledge through educational resources</p>
                   </div>
                 </Link>
@@ -61,7 +61,7 @@ const DesktopNav = () => {
                   className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
                 >
                   <div className="flex-1">
-                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 alien-logo-text">Clubs</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-atomic-force">Clubs</h3>
                     <p className="text-sm text-gray-400">Join specialized communities focused on interests</p>
                   </div>
                 </Link>
@@ -72,7 +72,7 @@ const DesktopNav = () => {
                   className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
                 >
                   <div className="flex-1">
-                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 alien-logo-text">CoNetWorKing</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-atomic-force">CoNetWorKing</h3>
                     <p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
                   </div>
                 </Link>
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
@@ -4,15 +4,15 @@ import { Link } from 'react-router-dom';
 
 const Logo = () => {
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-2">
       {/* Logo principal */}
       <Link to="/" className="flex items-center gap-2">
         <img 
           src="/lovable-uploads/ALogo.png" 
           alt="AlienFlowSpaceDAO Logo" 
           className="h-9" 
         />
-        <span className="alien-logo-text text-xl">
+        <span className="alien-logo-text text-base sm:text-lg md:text-xl">
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>
           <span className="text-alien-green"> $pac€</span>
@@ -25,7 +25,7 @@ const Logo = () => {
         <img 
           src="/lovable-uploads/ET.png" 
           alt="Earth" 
-          className="h-8 w-8 rounded-full hover:opacity-80 transition-opacity"
+          className="h-7 w-7 sm:h-8 sm:w-8 rounded-full hover:opacity-80 transition-opacity"
         />
       </Link>
     </div>
diff --git a/src/components/Header/MobileNav.tsx b/src/components/Header/MobileNav.tsx
@@ -21,34 +21,34 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
       initial={{ opacity: 0, height: 0 }}
       animate={{ opacity: 1, height: 'auto' }}
       exit={{ opacity: 0, height: 0 }}
-      className="bg-alien-space-dark absolute w-full z-50 top-full"
+      className="bg-alien-space-dark absolute w-full z-50 top-full shadow-lg"
     >
       <div className="container mx-auto px-4 py-6">
         <nav className="flex flex-col space-y-4">
           <Link 
             to="/" 
-            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
             onClick={() => setIsMenuOpen(false)}
           >
             Home
           </Link>
           <Link 
             to="/about" 
-            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
             onClick={() => setIsMenuOpen(false)}
           >
             About
           </Link>
           <Link 
             to="/alien-trip" 
-            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
             onClick={() => setIsMenuOpen(false)}
           >
             AlienTrip
           </Link>
           <Link 
             to="/contact" 
-            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
             onClick={() => setIsMenuOpen(false)}
           >
             Contact
@@ -58,7 +58,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
           <div className="flex flex-col">
             <button
               onClick={() => setSpacesExpanded(!spacesExpanded)}
-              className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md flex justify-between items-center alien-logo-text"
+              className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md flex justify-between items-center font-atomic-force"
             >
               <span>Explore Spaces</span>
               {spacesExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
@@ -71,23 +71,23 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
                   className="p-2 hover:bg-alien-space-light rounded-md text-alien-gold hover:text-alien-green"
                   onClick={() => setIsMenuOpen(false)}
                 >
-                  <h3 className="alien-logo-text">Academy</h3>
+                  <h3 className="font-atomic-force">Academy</h3>
                   <p className="text-sm text-gray-400">Unlock cosmic knowledge through educational resources</p>
                 </Link>
                 <Link 
                   to="/clubs" 
                   className="p-2 hover:bg-alien-space-light rounded-md text-alien-gold hover:text-alien-green"
                   onClick={() => setIsMenuOpen(false)}
                 >
-                  <h3 className="alien-logo-text">Clubs</h3>
+                  <h3 className="font-atomic-force">Clubs</h3>
                   <p className="text-sm text-gray-400">Join specialized communities focused on interests</p>
                 </Link>
                 <Link 
                   to="/conetworking" 
                   className="p-2 hover:bg-alien-space-light rounded-md text-alien-gold hover:text-alien-green"
                   onClick={() => setIsMenuOpen(false)}
                 >
-                  <h3 className="alien-logo-text">CoNetWorKing</h3>
+                  <h3 className="font-atomic-force">CoNetWorKing</h3>
                   <p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
                 </Link>
               </div>
@@ -98,7 +98,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
           <div className="flex flex-col">
             <button
               onClick={() => setLanguageExpanded(!languageExpanded)}
-              className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md flex items-center justify-between alien-logo-text"
+              className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md flex items-center justify-between font-atomic-force"
             >
               <div className="flex items-center">
                 <Globe className="mr-2 h-5 w-5" />
@@ -111,43 +111,43 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
               <div className="pl-2 flex flex-col space-y-1 mt-2 bg-alien-space-light/20 p-2 rounded-md">
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/us.png" alt="English" className="w-5 h-4 mr-2" />
-                  English
+                  <span>English</span>
                 </div>
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/es.png" alt="Español" className="w-5 h-4 mr-2" />
-                  Español
+                  <span>Español</span>
                 </div>
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/fr.png" alt="Français" className="w-5 h-4 mr-2" />
-                  Français
+                  <span>Français</span>
                 </div>
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/cn.png" alt="汉语" className="w-5 h-4 mr-2" />
-                  汉语 (Hànyǔ)
+                  <span>汉语 (Hànyǔ)</span>
                 </div>
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/in.png" alt="हिन्दी" className="w-5 h-4 mr-2" />
-                  हिन्दी (Hindī)
+                  <span>हिन्दी (Hindī)</span>
                 </div>
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/pt.png" alt="Português" className="w-5 h-4 mr-2" />
-                  Português
+                  <span>Português</span>
                 </div>
                 <div className="p-2 hover:bg-alien-space-light cursor-pointer rounded-md text-alien-gold hover:text-alien-green flex items-center">
                   <img src="https://flagcdn.com/w20/jp.png" alt="日本語" className="w-5 h-4 mr-2" />
-                  日本語 (Nihongo)
+                  <span>日本語 (Nihongo)</span>
                 </div>
               </div>
             )}
           </div>
           
-          <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full mt-4 flex items-center gap-2 alien-logo-text">
+          <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full mt-4 flex items-center gap-2 font-atomic-force">
             <img 
               src="/lovable-uploads/AW.png" 
               alt="Wallet" 
               className="h-6 w-6 rounded-full" 
             />
-            Connect Portal
+            <span className="font-atomic-force">Connect Portal</span>
           </Button>
         </nav>
       </div>
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -16,13 +16,13 @@ const Header = () => {
   const isMobile = useIsMobile();
 
   if (isMobile === undefined) {
-    return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center alien-logo-text">Cargando...</div>;
+    return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-atomic-force">Cargando...</div>;
   }
 
   return (
     <header
       className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
-        isScrolled ? "py-2 bg-transparent shadow-md backdrop-blur-md" : "py-3 bg-transparent backdrop-blur-sm"
+        isScrolled ? "py-1 bg-transparent shadow-md backdrop-blur-md" : "py-2 bg-transparent backdrop-blur-sm"
       }`}
     >
       <div className="container mx-auto px-4 flex justify-between items-center relative">
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -40,15 +40,15 @@ const Hero = () => {
           
           {/* Título del Hero */}
           <h1 
-            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-atomic-force"
+            className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-atomic-force"
           >
             <span className="text-alien-green">Δlieπ</span>
             <span className="text-alien-gold">FlΦw</span>
             <span className="text-alien-green"> $pac€</span>
             <span className="text-alien-gold"> DAO</span>
           </h1>
           <motion.p 
-            className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8 font-[Exo] text-center"
+            className="text-lg sm:text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8 font-[Exo] text-center"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.3, duration: 0.8 }}
@@ -67,16 +67,16 @@ const Hero = () => {
           {/* Botón About */}
           <Link to="/about">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors"
+              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
             >
               <Orbit className="mr-2 h-5 w-5" /> About Enter Portal
             </Button>
           </Link>
 
           {/* Botón AlienTrip */}
-          <Link to="/alientrip">
+          <Link to="/alien-trip">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors"
+              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
             >
               <ScrollText className="mr-2 h-5 w-5" /> Alientrip Manifesto
             </Button>
@@ -85,7 +85,7 @@ const Hero = () => {
           {/* Botón Contact */}
           <Link to="/contact">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors"
+              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-6 sm:px-8 py-5 sm:py-6 text-base sm:text-lg rounded-full transition-colors"
             >
               <Globe className="mr-2 h-5 w-5" /> Contact & Join
             </Button>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -8,7 +8,7 @@ const Layout: React.FC = () => {
   return (
     <div className="flex flex-col min-h-screen bg-alien-space">
       <Header />
-      <main className="flex-1 relative z-10 pt-20">
+      <main className="flex-1 relative z-10 pt-24 sm:pt-28 md:pt-32">
         <div className="container mx-auto px-4">
           <Outlet />
         </div>
diff --git a/src/global.css b/src/global.css

Original file line number	Diff line number	Diff line change
`@@ -16,13 +16,13 @@ const Header = () => {`
`16`	`16`	`const isMobile = useIsMobile();`
`17`	`17`
`18`	`18`	`if (isMobile === undefined) {`
`19`		`- return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center alien-logo-text">Cargando...</div>;`
	`19`	`+ return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-atomic-force">Cargando...</div>;`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`return (`
`23`	`23`	`<header`
`24`	`24`	className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
`25`		`- isScrolled ? "py-2 bg-transparent shadow-md backdrop-blur-md" : "py-3 bg-transparent backdrop-blur-sm"`
	`25`	`+ isScrolled ? "py-1 bg-transparent shadow-md backdrop-blur-md" : "py-2 bg-transparent backdrop-blur-sm"`
`26`	`26`	}`}
`27`	`27`	`>`
`28`	`28`	`<div className="container mx-auto px-4 flex justify-between items-center relative">`