Skip to content

Commit bbb5305

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Apply Atomic Age font to header and menu
Refactor and optimize header and menu components for improved responsiveness and cleanliness.
1 parent 64f70fa commit bbb5305

File tree

8 files changed

+49
-29
lines changed

8 files changed

+49
-29
lines changed

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap" />
1717
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />
1818

19+
<!-- Preload Critical Font Files -->
20+
<link rel="preload" href="https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2" as="font" type="font/woff2" crossorigin />
21+
1922
<!-- Open Graph Meta Tags -->
2023
<meta property="og:title" content="AlienFlowSpace DAO | Cosmic Decentralized Governance" />
2124
<meta property="og:description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />
@@ -31,7 +34,7 @@
3134
<title>AlienFlowSpace DAO | BioFi, DeFi, DeSci & More</title>
3235

3336
<!-- Favicon -->
34-
<link rel="icon" href="/public/lovable-uploads/ALogo.png" type="image/x-icon" />
37+
<link rel="icon" href="/lovable-uploads/ALogo.png" type="image/x-icon" />
3538
</head>
3639

3740
<body>

‎src/components/Header/ConnectButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button';
44

55
const ConnectButton = () => {
66
return (
7-
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold font-atomic-force rounded-full flex items-center gap-2">
7+
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold alien-logo-text rounded-full flex items-center gap-2">
88
<img
99
src="/lovable-uploads/AW.png"
1010
alt="Wallet"

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import React, { useState } from 'react';
2+
import React from 'react';
33
import { Link } from 'react-router-dom';
44
import { Globe, ChevronDown } from 'lucide-react';
55
import {
@@ -14,16 +14,16 @@ const DesktopNav = () => {
1414
return (
1515
<nav className="hidden md:flex items-center gap-6">
1616
<div className="hidden md:flex space-x-4">
17-
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force font-bold">
17+
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
1818
Home
1919
</Link>
20-
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force font-bold">
20+
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
2121
About
2222
</Link>
23-
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force font-bold">
23+
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
2424
AlienTrip
2525
</Link>
26-
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force font-bold">
26+
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
2727
Contact
2828
</Link>
2929

@@ -32,7 +32,7 @@ const DesktopNav = () => {
3232
<DropdownMenuTrigger asChild>
3333
<Button
3434
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-atomic-force font-bold"
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 alien-logo-text"
3636
>
3737
Explore Spaces
3838
<ChevronDown
@@ -50,7 +50,7 @@ const DesktopNav = () => {
5050
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
5151
>
5252
<div className="flex-1">
53-
<h3 className="text-alien-gold group-hover:text-alien-green font-bold mb-1 font-atomic-force">Academy</h3>
53+
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 alien-logo-text">Academy</h3>
5454
<p className="text-sm text-gray-400">Unlock cosmic knowledge through educational resources</p>
5555
</div>
5656
</Link>
@@ -61,7 +61,7 @@ const DesktopNav = () => {
6161
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
6262
>
6363
<div className="flex-1">
64-
<h3 className="text-alien-gold group-hover:text-alien-green font-bold mb-1 font-atomic-force">Clubs</h3>
64+
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 alien-logo-text">Clubs</h3>
6565
<p className="text-sm text-gray-400">Join specialized communities focused on interests</p>
6666
</div>
6767
</Link>
@@ -72,7 +72,7 @@ const DesktopNav = () => {
7272
className="flex items-start p-2 rounded-lg hover:bg-alien-space-light/20 group cursor-pointer"
7373
>
7474
<div className="flex-1">
75-
<h3 className="text-alien-gold group-hover:text-alien-green font-bold mb-1 font-atomic-force">CoNetWorKing</h3>
75+
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 alien-logo-text">CoNetWorKing</h3>
7676
<p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
7777
</div>
7878
</Link>
@@ -110,7 +110,7 @@ const DesktopNav = () => {
110110
].map((lang) => (
111111
<DropdownMenuItem
112112
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 font-bold"
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"
114114
>
115115
<img
116116
src={`https://flagcdn.com/w20/${lang.code}.png`}

‎src/components/Header/Logo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Logo = () => {
1212
alt="AlienFlowSpaceDAO Logo"
1313
className="h-9"
1414
/>
15-
<span className="font-atomic-force text-xl">
15+
<span className="alien-logo-text text-xl">
1616
<span className="text-alien-green">Δlieπ</span>
1717
<span className="text-alien-gold">FlΦw</span>
1818
<span className="text-alien-green"> $pac€</span>

‎src/components/Header/MobileNav.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,28 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
2727
<nav className="flex flex-col space-y-4">
2828
<Link
2929
to="/"
30-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force font-bold"
30+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
3131
onClick={() => setIsMenuOpen(false)}
3232
>
3333
Home
3434
</Link>
3535
<Link
3636
to="/about"
37-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force font-bold"
37+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
3838
onClick={() => setIsMenuOpen(false)}
3939
>
4040
About
4141
</Link>
4242
<Link
4343
to="/alien-trip"
44-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force font-bold"
44+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
4545
onClick={() => setIsMenuOpen(false)}
4646
>
4747
AlienTrip
4848
</Link>
4949
<Link
5050
to="/contact"
51-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force font-bold"
51+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md alien-logo-text"
5252
onClick={() => setIsMenuOpen(false)}
5353
>
5454
Contact
@@ -58,7 +58,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
5858
<div className="flex flex-col">
5959
<button
6060
onClick={() => setSpacesExpanded(!spacesExpanded)}
61-
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 font-bold"
61+
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"
6262
>
6363
<span>Explore Spaces</span>
6464
{spacesExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
@@ -71,23 +71,23 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
7171
className="p-2 hover:bg-alien-space-light rounded-md text-alien-gold hover:text-alien-green"
7272
onClick={() => setIsMenuOpen(false)}
7373
>
74-
<h3 className="font-bold font-atomic-force">Academy</h3>
74+
<h3 className="alien-logo-text">Academy</h3>
7575
<p className="text-sm text-gray-400">Unlock cosmic knowledge through educational resources</p>
7676
</Link>
7777
<Link
7878
to="/clubs"
7979
className="p-2 hover:bg-alien-space-light rounded-md text-alien-gold hover:text-alien-green"
8080
onClick={() => setIsMenuOpen(false)}
8181
>
82-
<h3 className="font-bold font-atomic-force">Clubs</h3>
82+
<h3 className="alien-logo-text">Clubs</h3>
8383
<p className="text-sm text-gray-400">Join specialized communities focused on interests</p>
8484
</Link>
8585
<Link
8686
to="/conetworking"
8787
className="p-2 hover:bg-alien-space-light rounded-md text-alien-gold hover:text-alien-green"
8888
onClick={() => setIsMenuOpen(false)}
8989
>
90-
<h3 className="font-bold font-atomic-force">CoNetWorKing</h3>
90+
<h3 className="alien-logo-text">CoNetWorKing</h3>
9191
<p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
9292
</Link>
9393
</div>
@@ -98,7 +98,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
9898
<div className="flex flex-col">
9999
<button
100100
onClick={() => setLanguageExpanded(!languageExpanded)}
101-
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 font-bold"
101+
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"
102102
>
103103
<div className="flex items-center">
104104
<Globe className="mr-2 h-5 w-5" />
@@ -141,9 +141,9 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
141141
)}
142142
</div>
143143

144-
<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 font-bold">
144+
<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">
145145
<img
146-
src="/lovable-uploads/e2d45b36-c4c1-4b45-953d-5376a5f5b6cc.png"
146+
src="/lovable-uploads/AW.png"
147147
alt="Wallet"
148148
className="h-6 w-6 rounded-full"
149149
/>

‎src/components/Header/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Header = () => {
1616
const isMobile = useIsMobile();
1717

1818
if (isMobile === undefined) {
19-
return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-atomic-force">Cargando...</div>;
19+
return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center alien-logo-text">Cargando...</div>;
2020
}
2121

2222
return (

‎src/global.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,34 @@ main {
6666
}
6767

6868
/* Force Atomic Age font to appear correctly */
69+
@font-face {
70+
font-family: 'Atomic Age';
71+
font-style: normal;
72+
font-weight: 400;
73+
font-display: swap;
74+
src: url(https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2) format('woff2');
75+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
76+
}
77+
6978
h1, h2, h3, h4, h5, h6, .font-atomic {
7079
font-family: 'Atomic Age', cursive !important;
80+
letter-spacing: 0.5px;
7181
}
7282

73-
/* We're adding a separate class with higher specificity for problematic elements */
7483
.font-atomic-force {
7584
font-family: 'Atomic Age', cursive !important;
7685
font-weight: 400 !important;
7786
font-style: normal !important;
87+
letter-spacing: 0.5px !important;
88+
}
89+
90+
/* Alien logo text specific styling */
91+
.alien-logo-text {
92+
font-family: 'Atomic Age', cursive !important;
93+
letter-spacing: 0.5px !important;
94+
font-weight: 400 !important;
95+
font-style: normal !important;
96+
font-display: block !important;
7897
}
7998

8099
/* Alignment correction for sections */

‎src/pages/Index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import EcosystemSection from '@/components/EcosystemSection';
77
import FeaturesSection from '@/components/FeaturesSection';
88
import FinancialFreedomSection from '@/components/FinancialFreedomSection';
99
import ParticipationSection from '@/components/ParticipationSection';
10-
import StatsSection from '@/components/StatsSection';
1110

1211
const Index: React.FC = () => {
1312
return (
@@ -23,10 +22,9 @@ const Index: React.FC = () => {
2322
<div className="relative z-10">
2423
<Hero />
2524
<div className="container mx-auto text-center px-4 py-8 section-center">
26-
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-alien-gold font-atomic-force">₿£€$$</h2>
25+
<h2 className="text-4xl md:text-5xl mb-4 text-alien-gold alien-logo-text">₿£€$$</h2>
2726
</div>
2827
<FinancialFreedomSection />
29-
{/* StatsSection removed from here as its content has been moved to ParticipationSection */}
3028
<ExploreSpacesSection />
3129
<EcosystemSection />
3230
<FeaturesSection />

0 commit comments

Comments
 (0)