Skip to content

Commit 3ae753f

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Hero, Header, and Logo styling
- Fixed the Hero title, Header, and Logo to correctly display the Atomic Age font. - Resolved the issue of the Hero title appearing on two lines in the mobile version. - Adjusted page layouts to prevent the header from overlapping content.
1 parent bbb5305 commit 3ae753f

File tree

10 files changed

+45
-48
lines changed

10 files changed

+45
-48
lines changed

‎index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,15 @@
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 for Better Performance -->
11+
<!-- Critical Font Preloads -->
12+
<link rel="preload" href="https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2" as="font" type="font/woff2" crossorigin />
1213
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap" as="style" />
1314
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" as="style" />
1415

1516
<!-- Font Stylesheets -->
1617
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atomic+Age&display=swap" />
1718
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap" />
1819

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-
2220
<!-- Open Graph Meta Tags -->
2321
<meta property="og:title" content="AlienFlowSpace DAO | Cosmic Decentralized Governance" />
2422
<meta property="og:description" content="AlienFlowSpace DAO unites BioFi, DeFi, DePin, DeSci, IPFS, QFS, ReFi, RWA, SocialFi, and TradFi under one cosmic ecosystem." />

‎src/components/Header/ConnectButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ 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 alien-logo-text rounded-full flex items-center gap-2">
7+
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-gold font-atomic-force rounded-full flex items-center gap-2 px-3 py-2">
88
<img
99
src="/lovable-uploads/AW.png"
1010
alt="Wallet"
11-
className="h-6 w-6 rounded-full"
11+
className="h-5 w-5 md:h-6 md:w-6 rounded-full"
1212
/>
13-
Connect Portal
13+
<span className="whitespace-nowrap">Connect Portal</span>
1414
</Button>
1515
);
1616
};

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -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 alien-logo-text">
17+
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force whitespace-nowrap">
1818
Home
1919
</Link>
20-
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
20+
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force whitespace-nowrap">
2121
About
2222
</Link>
23-
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
23+
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force whitespace-nowrap">
2424
AlienTrip
2525
</Link>
26-
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 alien-logo-text">
26+
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic-force whitespace-nowrap">
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 alien-logo-text"
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 whitespace-nowrap"
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 mb-1 alien-logo-text">Academy</h3>
53+
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-atomic-force">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 mb-1 alien-logo-text">Clubs</h3>
64+
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-atomic-force">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 mb-1 alien-logo-text">CoNetWorKing</h3>
75+
<h3 className="text-alien-gold group-hover:text-alien-green mb-1 font-atomic-force">CoNetWorKing</h3>
7676
<p className="text-sm text-gray-400">Connect with like-minded and profits across the multiverse</p>
7777
</div>
7878
</Link>

‎src/components/Header/Logo.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ import { Link } from 'react-router-dom';
44

55
const Logo = () => {
66
return (
7-
<div className="flex items-center gap-4">
7+
<div className="flex items-center gap-2 md:gap-4">
88
{/* Logo principal */}
9-
<Link to="/" className="flex items-center gap-2">
9+
<Link to="/" className="flex items-center gap-1 md:gap-2">
1010
<img
1111
src="/lovable-uploads/ALogo.png"
1212
alt="AlienFlowSpaceDAO Logo"
13-
className="h-9"
13+
className="h-8 md:h-9"
1414
/>
15-
<span className="alien-logo-text text-xl">
15+
<span className="whitespace-nowrap text-lg md:text-xl font-atomic-force">
1616
<span className="text-alien-green">Δlieπ</span>
1717
<span className="text-alien-gold">FlΦw</span>
18-
<span className="text-alien-green"> $pac€</span>
19-
<span className="text-alien-gold"> DAO</span>
18+
<span className="text-alien-green">$pac€</span>
19+
<span className="text-alien-gold">DAO</span>
2020
</span>
2121
</Link>
2222

@@ -25,7 +25,7 @@ const Logo = () => {
2525
<img
2626
src="/lovable-uploads/ET.png"
2727
alt="Earth"
28-
className="h-8 w-8 rounded-full hover:opacity-80 transition-opacity"
28+
className="h-7 w-7 md:h-8 md:w-8 rounded-full hover:opacity-80 transition-opacity"
2929
/>
3030
</Link>
3131
</div>

‎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 alien-logo-text"
30+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
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 alien-logo-text"
37+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
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 alien-logo-text"
44+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
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 alien-logo-text"
51+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic-force"
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 alien-logo-text"
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"
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="alien-logo-text">Academy</h3>
74+
<h3 className="font-atomic-force">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="alien-logo-text">Clubs</h3>
82+
<h3 className="font-atomic-force">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="alien-logo-text">CoNetWorKing</h3>
90+
<h3 className="font-atomic-force">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 alien-logo-text"
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"
102102
>
103103
<div className="flex items-center">
104104
<Globe className="mr-2 h-5 w-5" />
@@ -141,11 +141,11 @@ 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 alien-logo-text">
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">
145145
<img
146146
src="/lovable-uploads/AW.png"
147147
alt="Wallet"
148-
className="h-6 w-6 rounded-full"
148+
className="h-5 w-5 md:h-6 md:w-6 rounded-full"
149149
/>
150150
Connect Portal
151151
</Button>

‎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 alien-logo-text">Cargando...</div>;
19+
return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-atomic-force">Cargando...</div>;
2020
}
2121

2222
return (

‎src/components/Hero.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,13 @@ const Hero = () => {
3939
</div>
4040

4141
{/* Título del Hero */}
42-
<h1
43-
className="text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-atomic-force"
44-
>
42+
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-4 tracking-tight text-glow text-center font-atomic-force">
4543
<span className="text-alien-green">Δlieπ</span>
4644
<span className="text-alien-gold">FlΦw</span>
47-
<span className="text-alien-green"> $pac€</span>
48-
<span className="text-alien-gold"> DAO</span>
45+
<span className="text-alien-green">$pac€</span>
46+
<span className="text-alien-gold">DAO</span>
4947
</h1>
48+
5049
<motion.p
5150
className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8 font-[Exo] text-center"
5251
initial={{ opacity: 0 }}
@@ -67,16 +66,16 @@ const Hero = () => {
6766
{/* Botón About */}
6867
<Link to="/about">
6968
<Button
70-
className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors"
69+
className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors whitespace-nowrap"
7170
>
7271
<Orbit className="mr-2 h-5 w-5" /> About Enter Portal
7372
</Button>
7473
</Link>
7574

7675
{/* Botón AlienTrip */}
77-
<Link to="/alientrip">
76+
<Link to="/alien-trip">
7877
<Button
79-
className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors"
78+
className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors whitespace-nowrap"
8079
>
8180
<ScrollText className="mr-2 h-5 w-5" /> Alientrip Manifesto
8281
</Button>
@@ -85,7 +84,7 @@ const Hero = () => {
8584
{/* Botón Contact */}
8685
<Link to="/contact">
8786
<Button
88-
className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors"
87+
className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-atomic-force px-8 py-6 text-lg rounded-full transition-colors whitespace-nowrap"
8988
>
9089
<Globe className="mr-2 h-5 w-5" /> Contact & Join
9190
</Button>

‎src/components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Layout: React.FC = () => {
88
return (
99
<div className="flex flex-col min-h-screen bg-alien-space">
1010
<Header />
11-
<main className="flex-1 relative z-10 pt-20">
11+
<main className="flex-1 relative z-10 pt-28">
1212
<div className="container mx-auto px-4">
1313
<Outlet />
1414
</div>

‎src/global.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ body {
3939
padding: 0 1rem;
4040
}
4141

42-
/* Make sure content is visible */
42+
/* Make sure content is visible and not hidden under the header */
4343
main {
4444
flex: 1;
4545
position: relative;
46-
padding-top: 6rem;
46+
padding-top: 7rem; /* Increased to prevent content from being hidden under header */
4747
}
4848

4949
/* Add text glow effect */
@@ -70,7 +70,7 @@ main {
7070
font-family: 'Atomic Age';
7171
font-style: normal;
7272
font-weight: 400;
73-
font-display: swap;
73+
font-display: block;
7474
src: url(https://fonts.gstatic.com/s/atomicage/v27/f0Xz0eug6sdmRFkYZZGL58Ht9a8.woff2) format('woff2');
7575
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;
7676
}

‎src/pages/Index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Index: React.FC = () => {
2222
<div className="relative z-10">
2323
<Hero />
2424
<div className="container mx-auto text-center px-4 py-8 section-center">
25-
<h2 className="text-4xl md:text-5xl mb-4 text-alien-gold alien-logo-text">₿£€$$</h2>
25+
<h2 className="text-4xl md:text-5xl mb-4 text-alien-gold font-atomic-force">₿£€$$</h2>
2626
</div>
2727
<FinancialFreedomSection />
2828
<ExploreSpacesSection />

0 commit comments

Comments
 (0)