Fix: UI/UX improvements

Fixes font rendering, background issues, and header layout.

Author: lovable-dev[bot]

src/components/Header/DesktopNav.tsx

@@ -14,16 +14,16 @@ const DesktopNav = () => {
   return (
     <nav className="hidden md:flex items-center gap-6">
       <div className="hidden md:flex space-x-4">
-        <Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2">
+        <Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
           Home
         </Link>
-        <Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2">
+        <Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
           About
         </Link>
-        <Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2">
+        <Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
           AlienTrip
         </Link>
-        <Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2">
+        <Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
           Contact
         </Link>
 
@@ -32,7 +32,7 @@ const DesktopNav = () => {
           <DropdownMenuTrigger asChild>
             <Button 
               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"
+              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 font-atomic"
             >
               Explore Spaces
               <ChevronDown 
@@ -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 font-semibold mb-1">Academy</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green font-semibold mb-1 font-atomic">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 font-semibold mb-1">Clubs</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green font-semibold mb-1 font-atomic">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 font-semibold mb-1">CoNetWorKing</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green font-semibold mb-1 font-atomic">CoNetWorKing</h3>
                     <p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
                   </div>
                 </Link>
@@ -129,4 +129,3 @@ const DesktopNav = () => {
 };
 
 export default DesktopNav;
-

src/components/Header/Logo.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -11,10 +12,7 @@ const Logo = () => {
           alt="AlienFlowSpaceDAO Logo" 
           className="h-9" 
         />
-        <span 
-          className="font-bold text-xl"
-          style={{ fontFamily: "'Atomic Age', cursive" }}
-        >
+        <span className="font-bold text-xl font-atomic">
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>
           <span className="text-alien-green">$pac€</span>

src/components/Header/MobileNav.tsx

@@ -27,28 +27,28 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
         <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"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
             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"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
             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"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
             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"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
             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"
+              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"
             >
               <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="font-semibold">Academy</h3>
+                  <h3 className="font-semibold font-atomic">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="font-semibold">Clubs</h3>
+                  <h3 className="font-semibold font-atomic">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="font-semibold">CoNetWorKing</h3>
+                  <h3 className="font-semibold font-atomic">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"
+              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"
             >
               <div className="flex items-center">
                 <Globe className="mr-2 h-5 w-5" />
@@ -141,7 +141,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
             )}
           </div>
 
-          <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold font-[Atomic Age] rounded-full mt-4 flex items-center gap-2">
+          <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold font-atomic rounded-full mt-4 flex items-center gap-2">
             <img 
               src="/lovable-uploads/e2d45b36-c4c1-4b45-953d-5376a5f5b6cc.png" 
               alt="Wallet" 

src/components/Header/index.tsx

@@ -22,7 +22,7 @@ const Header = () => {
   return (
     <header
       className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
-        isScrolled ? "py-3 bg-alien-space-dark/90 backdrop-blur-lg shadow-md" : "py-6 bg-transparent"
+        isScrolled ? "py-3 bg-alien-space-dark shadow-md" : "py-6 bg-alien-space-dark/80 backdrop-blur-lg"
       }`}
     >
       <div className="container mx-auto px-4 flex justify-between items-center relative">
@@ -49,7 +49,7 @@ const Header = () => {
           <MobileNav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
         )}
       </AnimatePresence>
-      <div className="absolute left-0 right-0 bottom-0 translate-y-full w-full bg-alien-space-dark/80">
+      <div className="w-full border-t border-alien-gold/20 border-b border-alien-gold/20">
         <PriceTicker />
       </div>
     </header>

src/components/Hero.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Button } from '@/components/ui/button';
@@ -39,8 +40,7 @@ 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"
-            style={{ fontFamily: "'Atomic Age', cursive" }}
+            className="text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-atomic"
           >
             <span className="text-alien-green">Δlieπ</span>
             <span className="text-alien-gold">FlΦw</span>
@@ -67,7 +67,7 @@ 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-[Exo] 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 px-8 py-6 text-lg rounded-full transition-colors"
             >
               <Orbit className="mr-2 h-5 w-5" /> About Enter Portal
             </Button>
@@ -76,7 +76,7 @@ const Hero = () => {
           {/* Botón AlienTrip */}
           <Link to="/alientrip">
             <Button 
-              className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-[Exo] 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 px-8 py-6 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-[Exo] 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 px-8 py-6 text-lg rounded-full transition-colors"
             >
               <Globe className="mr-2 h-5 w-5" /> Contact & Join
             </Button>

src/components/Layout.tsx

@@ -6,7 +6,7 @@ import Footer from './Footer';
 
 const Layout: React.FC = () => {
   return (
-    <div className="flex flex-col min-h-screen bg-black">
+    <div className="flex flex-col min-h-screen bg-alien-space">
       <Header />
       <main className="flex-1 relative z-10">
         <div className="container mx-auto px-4 pt-20">

src/global.css

@@ -43,7 +43,7 @@ body {
 main {
   flex: 1;
   position: relative;
-  padding-top: 4rem;
+  padding-top: 5rem;
 }
 
 /* Add text glow effect */