Skip to content

Commit b41ee8a

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Apply Nasalization font
Ensure the Nasalization font is correctly applied throughout the application.
1 parent a3d95a1 commit b41ee8a

File tree

7 files changed

+180
-304
lines changed

7 files changed

+180
-304
lines changed

‎index.html‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
<meta name="author" content="AlienFlowSpace" />
99
<meta name="description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />
1010

11-
<!-- Preload Fonts - Alta prioridad para Nasalization -->
11+
<!-- Preconnect to Font Sources -->
1212
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1313
<link rel="preconnect" href="https://fonts.cdnfonts.com" crossorigin />
1414

15-
<!-- MAXIMUM PRIORITY: Preload Nasalization Font -->
16-
<link rel="preload" href="https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
15+
<!-- HIGH PRIORITY FONT LOADING -->
16+
<link rel="preload" href="https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf" as="font" type="font/ttf" crossorigin />
1717

18-
<!-- Font Stylesheets - Carga directa sin @import -->
19-
<link href="https://fonts.cdnfonts.com/css/nasalization" rel="stylesheet">
20-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />
18+
<!-- Font Stylesheets - Direct loading -->
19+
<link href="https://fonts.cdnfonts.com/css/nasalization" rel="stylesheet" media="print" onload="this.media='all'" />
20+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" media="print" onload="this.media='all'" />
2121

2222
<!-- Open Graph Meta Tags -->
2323
<meta property="og:title" content="AlienFlowSpace DAO | Cosmic Decentralized Governance" />
@@ -36,31 +36,32 @@
3636
<!-- Favicon -->
3737
<link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
3838

39-
<!-- Critical Font CSS inlined para asegurar carga inmediata de Nasalization -->
39+
<!-- CRITICAL FONT LOADING IN PAGE HEAD -->
4040
<style>
41-
/* CRITICAL: Carga prioritaria de Nasalization */
41+
/* Immediate font application */
4242
@font-face {
4343
font-family: 'Nasalization';
4444
src: url('https://fonts.cdnfonts.com/s/35587/nasalization-rg.ttf') format('truetype');
4545
font-weight: 400;
4646
font-style: normal;
47-
font-display: swap;
47+
font-display: block;
4848
}
4949

50-
/* FORZAR aplicación de Nasalization a todos los elementos con clase o etiqueta */
50+
/* Global style overrides */
5151
h1, h2, h3, h4, h5, h6,
52-
.font-nasalization {
52+
.font-nasalization,
53+
.font-atomic-force,
54+
.font-atomic,
55+
.font-[Atomic\ Age],
56+
.font-[Atomic\ Age\,\ Star\ Wars] {
5357
font-family: 'Nasalization', sans-serif !important;
5458
font-weight: 400 !important;
5559
letter-spacing: 0.5px !important;
5660
}
5761

58-
/* Eliminar todas las referencias a atomic-force/atomic */
59-
.font-atomic-force,
60-
.font-atomic {
62+
/* Forcing menu and title fonts */
63+
nav, header, .page-title, button, a.font-nasalization {
6164
font-family: 'Nasalization', sans-serif !important;
62-
font-weight: 400 !important;
63-
letter-spacing: 0.5px !important;
6465
}
6566
</style>
6667
</head>

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 38 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,50 @@
11

22
import React from 'react';
33
import { Link } from 'react-router-dom';
4-
import { Globe, ChevronDown } from 'lucide-react';
5-
import {
6-
DropdownMenu,
7-
DropdownMenuContent,
8-
DropdownMenuItem,
9-
DropdownMenuTrigger,
10-
} from "@/components/ui/dropdown-menu";
11-
import { Button } from "@/components/ui/button";
4+
import { useLocation } from 'react-router-dom';
5+
import { motion } from 'framer-motion';
126

137
const DesktopNav = () => {
8+
const location = useLocation();
9+
10+
const navLinks = [
11+
{ name: 'Home', path: '/' },
12+
{ name: 'About', path: '/about' },
13+
{ name: 'Academy', path: '/academy' },
14+
{ name: 'Alien Trip', path: '/alien-trip' },
15+
{ name: 'Clubs', path: '/clubs' },
16+
{ name: 'CoNetWorKing', path: '/conetworking' },
17+
{ name: 'Contact', path: '/contact' },
18+
];
19+
1420
return (
15-
<nav className="hidden md:flex items-center gap-6">
16-
<div className="hidden md:flex space-x-4">
17-
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
18-
Home
19-
</Link>
20-
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
21-
About
22-
</Link>
23-
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
24-
AlienTrip
25-
</Link>
26-
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-nasalization">
27-
Contact
28-
</Link>
21+
<nav className="hidden md:flex items-center space-x-1 lg:space-x-2">
22+
{navLinks.map((link, index) => {
23+
const isActive = location.pathname === link.path;
2924

30-
{/* Explore Spaces Dropdown */}
31-
<DropdownMenu>
32-
<DropdownMenuTrigger asChild>
33-
<Button
34-
variant="ghost"
35-
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"
36-
>
37-
<span className="font-nasalization">Explore Spaces</span>
38-
<ChevronDown
39-
className="ml-2 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180 group-hover:text-alien-green"
40-
/>
41-
</Button>
42-
</DropdownMenuTrigger>
43-
<DropdownMenuContent
44-
className="bg-alien-space-dark border border-alien-gold/20 p-4 rounded-md w-[320px] shadow-lg z-[9999]"
25+
return (
26+
<Link
27+
key={index}
28+
to={link.path}
29+
className={`relative px-3 py-2 rounded-lg transition-all duration-300 font-nasalization ${
30+
isActive
31+
? 'text-alien-gold'
32+
: 'text-gray-300 hover:text-alien-gold'
33+
}`}
4534
>
46-
<div className="flex flex-col space-y-4">
47-
<DropdownMenuItem asChild>
48-
<Link
49-
to="/academy"
50-
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
51-
>
52-
<div className="flex-1">
53-
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">Academy</h3>
54-
<p className="text-sm text-gray-400">Unlock cosmic knowledge through educational resources</p>
55-
</div>
56-
</Link>
57-
</DropdownMenuItem>
58-
<DropdownMenuItem asChild>
59-
<Link
60-
to="/clubs"
61-
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
62-
>
63-
<div className="flex-1">
64-
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">Clubs</h3>
65-
<p className="text-sm text-gray-400">Join specialized communities focused on interests</p>
66-
</div>
67-
</Link>
68-
</DropdownMenuItem>
69-
<DropdownMenuItem asChild>
70-
<Link
71-
to="/conetworking"
72-
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
73-
>
74-
<div className="flex-1">
75-
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-nasalization">CoNetWorKing</h3>
76-
<p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
77-
</div>
78-
</Link>
79-
</DropdownMenuItem>
80-
</div>
81-
</DropdownMenuContent>
82-
</DropdownMenu>
83-
84-
{/* Language Selector Dropdown */}
85-
<DropdownMenu>
86-
<DropdownMenuTrigger asChild>
87-
<Button
88-
variant="ghost"
89-
className="flex items-center text-alien-gold hover:text-alien-green focus:outline-none group p-2"
90-
>
91-
<Globe className="h-5 w-5 group-hover:text-alien-green" />
92-
<ChevronDown
93-
className="ml-1 h-4 w-4 transform transition-transform duration-300 group-data-[state=open]:rotate-180"
35+
{link.name}
36+
{isActive && (
37+
<motion.div
38+
className="absolute bottom-0 left-0 h-0.5 w-full bg-alien-gold"
39+
layoutId="activeNav"
40+
initial={{ opacity: 0 }}
41+
animate={{ opacity: 1 }}
42+
transition={{ duration: 0.3 }}
9443
/>
95-
</Button>
96-
</DropdownMenuTrigger>
97-
<DropdownMenuContent
98-
className="bg-alien-space-dark border border-alien-gold/20 p-2 rounded-md w-[220px] shadow-lg z-[9999]"
99-
align="end"
100-
>
101-
<div className="flex flex-col space-y-1">
102-
{[
103-
{ code: 'us', name: 'English', lang: 'en' },
104-
{ code: 'es', name: 'Español', lang: 'es' },
105-
{ code: 'fr', name: 'Français', lang: 'fr' },
106-
{ code: 'cn', name: '汉语 (Hànyǔ)', lang: 'zh' },
107-
{ code: 'in', name: 'हिन्दी (Hindī)', lang: 'hi' },
108-
{ code: 'pt', name: 'Português', lang: 'pt' },
109-
{ code: 'jp', name: '日本語 (Nihongo)', lang: 'ja' },
110-
].map((lang) => (
111-
<DropdownMenuItem
112-
key={lang.code}
113-
className="flex items-center gap-2 text-alien-gold hover:text-alien-green hover:bg-alien-space-light/20 cursor-pointer p-2 rounded"
114-
>
115-
<img
116-
src={`https://flagcdn.com/w20/${lang.code}.png`}
117-
alt={`${lang.name} flag`}
118-
className="w-5 h-4"
119-
/>
120-
<span>{lang.name}</span>
121-
</DropdownMenuItem>
122-
))}
123-
</div>
124-
</DropdownMenuContent>
125-
</DropdownMenu>
126-
</div>
44+
)}
45+
</Link>
46+
);
47+
})}
12748
</nav>
12849
);
12950
};

0 commit comments

Comments
 (0)