Fix: Font inconsistencies and menu issues

Correct font usage and address menu display problems.

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">{ecosystem.title}</h3>
+        <h3 className="text-xl font-semibold mb-2 text-alien-gold font-atomic-force">{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,16 +103,14 @@ const EcosystemSection = () => {
         once: true,
         margin: "-100px"
       }} className="text-center mb-16">
-          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow">DAO Ecosystem</h2>
+          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic-force">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>
 
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
           {ecosystems.map((ecosystem, index) => <EcosystemCard key={ecosystem.id} ecosystem={ecosystem} index={index} />)}
         </div>
       </div>
-
-      {/* Remove background decoration */}
     </section>;
 };
 

src/components/ExploreSpacesSection.tsx

@@ -36,7 +36,7 @@ const ExploreSpacesSection = () => {
           viewport={{ once: true }} 
           className="text-center mb-16"
         >
-          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic">Explore Spaces</h2>
+          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic-force">Explore Spaces</h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto">
             Discover specialized environments designed to enhance your journey through the cosmos
           </p>
@@ -55,7 +55,7 @@ const ExploreSpacesSection = () => {
               <div className="mb-6 p-4 bg-alien-space-dark rounded-full">
                 {space.icon}
               </div>
-              <h3 className="text-2xl font-bold mb-4 text-alien-gold font-atomic">{space.title}</h3>
+              <h3 className="text-2xl font-bold mb-4 text-alien-gold font-atomic-force">{space.title}</h3>
               <p className="text-gray-300 mb-8 flex-grow">{space.description}</p>
               <Link to={space.link}>
                 <Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark">
@@ -66,8 +66,6 @@ const ExploreSpacesSection = () => {
           ))}
         </div>
       </div>
-
-      {/* Remove background decorations that were causing yellow glow */}
     </section>
   );
 };

src/components/FeaturesSection.tsx

@@ -1,6 +1,8 @@
+
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Globe, Shield, Users, Box, BarChart4 } from 'lucide-react';
+
 const features = [{
   icon: <Box className="h-10 w-10" />,
   title: "Cross-Chain Integration",
@@ -22,6 +24,7 @@ const features = [{
   title: "Transparent Analytics",
   description: "Access real-time data visualization and analytics on all ecosystem activity and performance."
 }];
+
 const FeaturesSection = () => {
   return <section className="py-20 relative overflow-hidden">
       <div className="container mx-auto px-4 py-0 my-0">
@@ -34,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">Advanced Features</h2>
+          <h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-atomic-force">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>
 
@@ -58,7 +61,7 @@ const FeaturesSection = () => {
                 </div>
               </div>
 
-              <h3 className="text-xl font-semibold mb-3 text-alien-gold">{feature.title}</h3>
+              <h3 className="text-xl font-semibold mb-3 text-alien-gold font-atomic-force">{feature.title}</h3>
               <p className="text-gray-300">{feature.description}</p>
 
               {/* Hover effect */}
@@ -71,4 +74,5 @@ const FeaturesSection = () => {
       <div className="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-alien-space to-transparent"></div>
     </section>;
 };
-export default FeaturesSection;
+
+export default FeaturesSection;

src/components/FinancialFreedomSection.tsx

@@ -1,7 +1,8 @@
+
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Bitcoin, Landmark, Coins } from 'lucide-react';
-import AnimatedText from './AnimatedText'; // Importamos AnimatedText
+import AnimatedText from './AnimatedText';
 
 const FinancialFreedomSection = () => {
   return (
@@ -22,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 Age]">
+          <h2 className="text-4xl font-bold mb-6 text-alien-gold text-glow font-atomic-force">
             Financial Freedom
           </h2>
 
@@ -60,8 +61,8 @@ 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 Age]">
-            A₿tc (Aurum nostrum non est aurum vulgi)
+          <h3 className="text-2xl font-bold mb-3 text-alien-gold font-atomic-force">
+            A₿tc (Aurum nostrum non est aurum vulgi)
           </h3>
           <p className="text-gray-300 mb-4 font-[Exo]">
             Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold, providing scalability, stability and growth potential (Φπ)...
@@ -71,8 +72,6 @@ const FinancialFreedomSection = () => {
           </div>
         </motion.div>
       </div>
-
-      {/* Eliminamos el elemento verde inclinado del fondo */}
     </section>
   );
 };

src/global.css

@@ -77,16 +77,6 @@ h1, h2, h3, h4, h5, h6, .font-atomic {
   white-space: nowrap !important; /* Keep text in one line */
 }
 
-/* Alien logo text specific styling */
-.alien-logo-text {
-  font-family: 'Nasalization', sans-serif !important;
-  letter-spacing: 0.5px !important;
-  font-weight: 400 !important;
-  font-style: normal !important;
-  font-display: block !important;
-  white-space: nowrap !important; /* Keep text in one line */
-}
-
 /* Alignment correction for sections */
 .section-center {
   display: flex;