Fix: Apply Nasalization font consistently

Update font usage across components and pages to ensure Nasalization font is applied correctly.

Author: lovable-dev[bot]

src/components/EcosystemSection.tsx

@@ -79,7 +79,7 @@ const EcosystemCard = ({
         <div className="mb-4 p-3 bg-alien-space-dark rounded-full w-fit">
           {ecosystem.icon}
         </div>
-        <h3 className="text-xl font-semibold mb-2 text-alien-gold font-atomic-force">{ecosystem.title}</h3>
+        <h3 className="text-xl font-semibold mb-2 text-alien-gold font-nasalization">{ecosystem.title}</h3>
         <p className="text-gray-300 flex-grow">{ecosystem.description}</p>
         <div className="mt-4">
           <a href={`#${ecosystem.id}`} className="text-alien-green hover:text-alien-green-light text-sm flex items-center">
@@ -103,7 +103,7 @@ const EcosystemSection = () => {
         once: true,
         margin: "-100px"
       }} className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic-force">DAO Ecosystem</h2>
+          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-nasalization">DAO Ecosystem</h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto">ΔlieπFlΦw $pac€ bridges diverse decentralized domains into a coherent, interoperable ecosystem.</p>
         </motion.div>
 

src/components/FeaturesSection.tsx

@@ -37,7 +37,7 @@ const FeaturesSection = () => {
       }} viewport={{
         once: true
       }} className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic-force">Advanced Features</h2>
+          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-nasalization">Advanced Features</h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto">ΔlieπFlΦw $pac€ offers cutting-edge technologies to support our interstellar ecosystem</p>
         </motion.div>
 
@@ -61,7 +61,7 @@ const FeaturesSection = () => {
                 </div>
               </div>
 
-              <h3 className="text-xl font-semibold mb-3 text-alien-gold font-atomic-force">{feature.title}</h3>
+              <h3 className="text-xl font-semibold mb-3 text-alien-gold font-nasalization">{feature.title}</h3>
               <p className="text-gray-300">{feature.description}</p>
 
               {/* Hover effect */}

src/components/FinancialFreedomSection.tsx

@@ -23,7 +23,7 @@ const FinancialFreedomSection = () => {
           }}
           className="text-center mb-12"
         >
-          <h2 className="text-4xl font-bold mb-6 text-alien-gold text-glow font-atomic-force">
+          <h2 className="text-4xl font-bold mb-6 text-alien-gold text-glow font-nasalization">
             Financial Freedom
           </h2>
 
@@ -60,7 +60,7 @@ const FinancialFreedomSection = () => {
           }}
           className="card-border p-8 max-w-3xl mx-auto text-center"
         >
-          <h3 className="text-2xl font-bold mb-3 text-alien-gold font-atomic-force">
+          <h3 className="text-2xl font-bold mb-3 text-alien-gold font-nasalization">
             A₿tc (Aurum nostrum non est aurum vulgi)
           </h3>
           <p className="text-gray-300 mb-4 font-[Exo]">

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 font-atomic-force rounded-full flex items-center gap-2 py-1 px-3 sm:px-4">
+    <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold font-nasalization rounded-full flex items-center gap-2 py-1 px-3 sm:px-4">
       <img 
         src="/lovable-uploads/AW.png" 
         alt="Wallet" 
         className="h-5 w-5 sm:h-6 sm:w-6 rounded-full" 
       />
-      <span className="font-atomic-force">Connect Portal</span>
+      <span className="font-nasalization">Connect Portal</span>
     </Button>
   );
 };

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 font-atomic-force">
+        <Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
           Home
         </Link>
-        <Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
+        <Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
           About
         </Link>
-        <Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
+        <Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
           AlienTrip
         </Link>
-        <Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force">
+        <Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
           Contact
         </Link>
 
@@ -32,9 +32,9 @@ 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 font-atomic-force"
+              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-nasalization"
             >
-              <span className="font-atomic-force">Explore Spaces</span>
+              <span className="font-nasalization">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 font-atomic-force">Academy</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">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 font-atomic-force">Clubs</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">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 font-atomic-force">CoNetWorKing</h3>
+                    <h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">CoNetWorKing</h3>
                     <p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
                   </div>
                 </Link>

src/components/Header/Logo.tsx

@@ -12,7 +12,7 @@ const Logo = () => {
           alt="AlienFlowSpaceDAO Logo" 
           className="h-9" 
         />
-        <span className="font-atomic-force text-base sm:text-lg md:text-xl overflow-hidden text-ellipsis">
+        <span className="font-nasalization text-base sm:text-lg md:text-xl overflow-hidden text-ellipsis">
           <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 font-atomic-force"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-nasalization"
             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 font-atomic-force"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-nasalization"
             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 font-atomic-force"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-nasalization"
             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 font-atomic-force"
+            className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-nasalization"
             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 font-atomic-force"
+              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-nasalization"
             >
               <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-atomic-force">Academy</h3>
+                  <h3 className="font-nasalization">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-atomic-force">Clubs</h3>
+                  <h3 className="font-nasalization">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-atomic-force">CoNetWorKing</h3>
+                  <h3 className="font-nasalization">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 font-atomic-force"
+              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-nasalization"
             >
               <div className="flex items-center">
                 <Globe className="mr-2 h-5 w-5" />
@@ -141,13 +141,13 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
             )}
           </div>
 
-          <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">
+          <Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold rounded-full mt-4 flex items-center gap-2 font-nasalization">
             <img 
               src="/lovable-uploads/AW.png" 
               alt="Wallet" 
               className="h-6 w-6 rounded-full" 
             />
-            <span className="font-atomic-force">Connect Portal</span>
+            <span className="font-nasalization">Connect Portal</span>
           </Button>
         </nav>
       </div>

src/components/Header/index.tsx

@@ -16,7 +16,7 @@ const Header = () => {
   const isMobile = useIsMobile();
 
   if (isMobile === undefined) {
-    return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-atomic-force">Cargando...</div>;
+    return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-nasalization">Cargando...</div>;
   }
 
   return (

src/global.css

@@ -69,6 +69,15 @@ h1, h2, h3, h4, h5, h6, .font-atomic {
   letter-spacing: 0.5px;
 }
 
+.font-nasalization {
+  font-family: 'Nasalization', sans-serif !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+  letter-spacing: 0.5px !important;
+  white-space: nowrap !important; /* Keep text in one line */
+}
+
+/* Redefino la clase font-atomic-force para quienes la utilicen todavía */
 .font-atomic-force {
   font-family: 'Nasalization', sans-serif !important;
   font-weight: 400 !important;
@@ -86,3 +95,4 @@ h1, h2, h3, h4, h5, h6, .font-atomic {
   width: 100%;
   text-align: center;
 }
+

src/index.css

@@ -65,6 +65,11 @@
     src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
   }
 
+  .font-nasalization {
+    font-family: 'Nasalization', sans-serif !important;
+    font-weight: 400 !important;
+  }
+
   .font-atomic-force {
     font-family: 'Nasalization', sans-serif !important;
     font-weight: 400 !important;