Skip to content

Commit 839e420

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Home page background and layout issues
- Correct home page background and layout. - Fix menu visibility. - Adjust footer spacing. - Update background for other pages. - Resolve build errors.
1 parent ecc5015 commit 839e420

File tree

4 files changed

+65
-45
lines changed

4 files changed

+65
-45
lines changed

‎src/components/Footer.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,26 @@ import { Link } from 'react-router-dom';
55

66
const Footer = () => {
77
return (
8-
<footer className="bg-alien-space-dark border-t border-alien-gold/20 py-8 lg:py-12">
8+
<footer className="bg-alien-space-dark/80 backdrop-blur-sm border-t border-alien-gold/20 py-6 lg:py-8 mt-auto">
99
<div className="container mx-auto px-4 lg:px-6">
10-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
10+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
1111
{/* Logo and description */}
12-
<div className="lg:col-span-2 flex flex-col gap-4">
13-
<div className="flex items-center gap-3">
12+
<div className="lg:col-span-2 flex flex-col gap-3">
13+
<div className="flex items-center gap-2">
1414
<img
1515
src="/lovable-uploads/ALogo.png"
1616
alt="AlienFlowSpaceDAO Logo"
17-
className="h-10 w-auto object-contain gold-glow"
17+
className="h-8 w-auto object-contain gold-glow"
1818
/>
19-
<span className="text-xl font-bold text-alien-gold font-nasalization">
19+
<span className="text-lg font-bold text-alien-gold font-nasalization">
2020
AlienFlowSpace DAO
2121
</span>
2222
</div>
23-
<p className="text-gray-300 text-sm lg:text-base font-[Exo] leading-relaxed max-w-md">
23+
<p className="text-gray-300 text-sm font-[Exo] leading-relaxed max-w-md">
2424
Uniting diverse blockchain domains under a cosmic governance structure.
2525
Building the future of decentralized finance and sustainable technology across the multiverse.
2626
</p>
27-
<div className="flex gap-3 pt-2 flex-wrap">
27+
<div className="flex gap-2 pt-1 flex-wrap">
2828
{[
2929
{ href: "https://x.com/alien69flow", icon: X, label: "X (Twitter)" },
3030
{ href: "https://www.facebook.com/Alien69Flow", icon: Facebook, label: "Facebook" },
@@ -41,18 +41,18 @@ const Footer = () => {
4141
target="_blank"
4242
rel="noopener noreferrer"
4343
aria-label={social.label}
44-
className="p-2 text-gray-400 hover:text-alien-gold transition-all duration-300 hover:scale-110 hover:bg-alien-space-light/20 rounded-lg"
44+
className="p-1.5 text-gray-400 hover:text-alien-gold transition-all duration-300 hover:scale-110 hover:bg-alien-space-light/20 rounded-lg"
4545
>
46-
<social.icon size={20} />
46+
<social.icon size={16} />
4747
</a>
4848
))}
4949
</div>
5050
</div>
5151

5252
{/* Navigation Links */}
5353
<div>
54-
<h4 className="text-alien-gold font-nasalization font-bold mb-4 text-lg">Navigation</h4>
55-
<ul className="space-y-3 text-gray-300 font-[Exo]">
54+
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base">Navigation</h4>
55+
<ul className="space-y-2 text-gray-300 font-[Exo]">
5656
{[
5757
{ to: "/", label: "Home" },
5858
{ to: "/about", label: "About" },
@@ -65,7 +65,7 @@ const Footer = () => {
6565
<li key={index}>
6666
<Link
6767
to={link.to}
68-
className="hover:text-alien-green transition-colors duration-300 hover:translate-x-1 inline-block"
68+
className="text-sm hover:text-alien-green transition-colors duration-300 hover:translate-x-1 inline-block"
6969
>
7070
{link.label}
7171
</Link>
@@ -76,8 +76,8 @@ const Footer = () => {
7676

7777
{/* Legal & Resources */}
7878
<div>
79-
<h4 className="text-alien-gold font-nasalization font-bold mb-4 text-lg">Resources</h4>
80-
<ul className="space-y-3 text-gray-300 font-[Exo]">
79+
<h4 className="text-alien-gold font-nasalization font-bold mb-3 text-base">Resources</h4>
80+
<ul className="space-y-2 text-gray-300 font-[Exo]">
8181
{[
8282
{ href: "https://alienflowspace.gitbook.io/DAO", label: "Documentation" },
8383
{ href: "https://alienflowspace.gitbook.io/DAO", label: "Terms of Service" },
@@ -89,7 +89,7 @@ const Footer = () => {
8989
href={link.href}
9090
target="_blank"
9191
rel="noopener noreferrer"
92-
className="hover:text-alien-green transition-colors duration-300 hover:translate-x-1 inline-block"
92+
className="text-sm hover:text-alien-green transition-colors duration-300 hover:translate-x-1 inline-block"
9393
>
9494
{link.label}
9595
</a>
@@ -99,12 +99,12 @@ const Footer = () => {
9999
</div>
100100
</div>
101101

102-
<div className="border-t border-alien-gold/20 mt-8 lg:mt-12 pt-6 lg:pt-8">
103-
<div className="flex flex-col lg:flex-row justify-between items-center gap-4">
104-
<p className="text-xs lg:text-sm text-gray-500 font-[Exo] text-center lg:text-left">
102+
<div className="border-t border-alien-gold/20 mt-6 pt-4">
103+
<div className="flex flex-col lg:flex-row justify-between items-center gap-2">
104+
<p className="text-xs text-gray-500 font-[Exo] text-center lg:text-left">
105105
© {new Date().getFullYear()} AlienFlowSpace DAO. All rights reserved across the multiverse.
106106
</p>
107-
<div className="flex items-center gap-2 text-xs text-gray-500">
107+
<div className="flex items-center gap-1 text-xs text-gray-500">
108108
<span>Made with</span>
109109
<span className="text-alien-gold">💚</span>
110110
<span>for the cosmic community</span>

‎src/components/Header/MobileNav.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import React, { useState } from 'react';
3-
import { motion } from 'framer-motion';
3+
import { motion, AnimatePresence } from 'framer-motion';
44
import { Link } from 'react-router-dom';
55
import { Globe, ChevronDown, ChevronUp } from 'lucide-react';
66
import { Button } from '@/components/ui/button';
@@ -46,8 +46,8 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
4646
exit={{ opacity: 0, height: 0 }}
4747
className="bg-alien-space-dark/95 backdrop-blur-md absolute w-full z-50 top-full shadow-2xl border-b border-alien-gold/20"
4848
>
49-
<div className="container mx-auto px-4 py-6 max-h-[80vh] overflow-y-auto">
50-
<nav className="flex flex-col space-y-2">
49+
<div className="container mx-auto px-4 py-4 max-h-[70vh] overflow-y-auto">
50+
<nav className="flex flex-col space-y-1">
5151
{/* Main Navigation */}
5252
{navLinks.map((link, index) => (
5353
<motion.div
@@ -58,7 +58,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
5858
>
5959
<Link
6060
to={link.to}
61-
className="block text-alien-gold py-3 px-4 hover:text-alien-green hover:bg-alien-space-light/30 rounded-lg font-nasalization transition-all duration-300"
61+
className="block text-alien-gold py-2 px-3 hover:text-alien-green hover:bg-alien-space-light/30 rounded-lg font-nasalization transition-all duration-300"
6262
onClick={() => setIsMenuOpen(false)}
6363
>
6464
{link.label}
@@ -75,7 +75,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
7575
>
7676
<button
7777
onClick={() => setSpacesExpanded(!spacesExpanded)}
78-
className="text-alien-gold py-3 px-4 hover:text-alien-green hover:bg-alien-space-light/30 rounded-lg flex justify-between items-center font-nasalization transition-all duration-300"
78+
className="text-alien-gold py-2 px-3 hover:text-alien-green hover:bg-alien-space-light/30 rounded-lg flex justify-between items-center font-nasalization transition-all duration-300"
7979
>
8080
<span>Explore Spaces</span>
8181
<motion.div
@@ -92,7 +92,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
9292
initial={{ opacity: 0, height: 0 }}
9393
animate={{ opacity: 1, height: 'auto' }}
9494
exit={{ opacity: 0, height: 0 }}
95-
className="ml-2 mt-2 bg-alien-space-light/20 rounded-lg overflow-hidden"
95+
className="ml-2 mt-1 bg-alien-space-light/20 rounded-lg overflow-hidden"
9696
>
9797
{spaceLinks.map((link, index) => (
9898
<motion.div
@@ -103,10 +103,10 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
103103
>
104104
<Link
105105
to={link.to}
106-
className="block p-4 hover:bg-alien-space-light/30 text-alien-gold hover:text-alien-green transition-all duration-300"
106+
className="block p-3 hover:bg-alien-space-light/30 text-alien-gold hover:text-alien-green transition-all duration-300"
107107
onClick={() => setIsMenuOpen(false)}
108108
>
109-
<h3 className="font-nasalization font-semibold mb-1">{link.label}</h3>
109+
<h3 className="font-nasalization font-semibold mb-1 text-sm">{link.label}</h3>
110110
<p className="text-xs text-gray-400 leading-tight">{link.desc}</p>
111111
</Link>
112112
</motion.div>
@@ -125,17 +125,17 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
125125
>
126126
<button
127127
onClick={() => setLanguageExpanded(!languageExpanded)}
128-
className="text-alien-gold py-3 px-4 hover:text-alien-green hover:bg-alien-space-light/30 rounded-lg flex items-center justify-between font-nasalization transition-all duration-300"
128+
className="text-alien-gold py-2 px-3 hover:text-alien-green hover:bg-alien-space-light/30 rounded-lg flex items-center justify-between font-nasalization transition-all duration-300"
129129
>
130130
<div className="flex items-center gap-2">
131-
<Globe className="h-5 w-5" />
131+
<Globe className="h-4 w-4" />
132132
<span>Language</span>
133133
</div>
134134
<motion.div
135135
animate={{ rotate: languageExpanded ? 180 : 0 }}
136136
transition={{ duration: 0.3 }}
137137
>
138-
<ChevronDown size={18} />
138+
<ChevronDown size={16} />
139139
</motion.div>
140140
</button>
141141

@@ -145,22 +145,22 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
145145
initial={{ opacity: 0, height: 0 }}
146146
animate={{ opacity: 1, height: 'auto' }}
147147
exit={{ opacity: 0, height: 0 }}
148-
className="ml-2 mt-2 bg-alien-space-light/20 rounded-lg overflow-hidden max-h-48 overflow-y-auto"
148+
className="ml-2 mt-1 bg-alien-space-light/20 rounded-lg overflow-hidden max-h-32 overflow-y-auto"
149149
>
150150
{languages.map((lang, index) => (
151151
<motion.div
152152
key={lang.code}
153153
initial={{ opacity: 0, x: -10 }}
154154
animate={{ opacity: 1, x: 0 }}
155155
transition={{ delay: index * 0.05 }}
156-
className="p-3 hover:bg-alien-space-light/30 cursor-pointer text-alien-gold hover:text-alien-green flex items-center gap-3 transition-all duration-300"
156+
className="p-2 hover:bg-alien-space-light/30 cursor-pointer text-alien-gold hover:text-alien-green flex items-center gap-2 transition-all duration-300"
157157
>
158158
<img
159159
src={`https://flagcdn.com/w20/${lang.code}.png`}
160160
alt={`${lang.name} flag`}
161-
className="w-5 h-4 rounded-sm"
161+
className="w-4 h-3 rounded-sm"
162162
/>
163-
<span className="text-sm">{lang.name}</span>
163+
<span className="text-xs">{lang.name}</span>
164164
</motion.div>
165165
))}
166166
</motion.div>
@@ -173,12 +173,13 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
173173
initial={{ opacity: 0, x: -20 }}
174174
animate={{ opacity: 1, x: 0 }}
175175
transition={{ delay: 0.6 }}
176+
className="pt-2"
176177
>
177-
<Button className="w-full bg-alien-green hover:bg-alien-green-light text-alien-space-dark rounded-lg mt-4 py-3 flex items-center justify-center gap-3 font-nasalization transition-all duration-300 hover:scale-105">
178+
<Button className="w-full bg-alien-green hover:bg-alien-green-light text-alien-space-dark rounded-lg py-2 flex items-center justify-center gap-2 font-nasalization transition-all duration-300 hover:scale-105">
178179
<img
179180
src="/lovable-uploads/AW.png"
180181
alt="Wallet"
181-
className="h-6 w-6 rounded-full"
182+
className="h-5 w-5 rounded-full"
182183
/>
183184
<span>Connect Portal</span>
184185
</Button>

‎src/components/Header/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Header = () => {
1717

1818
if (isMobile === undefined) {
1919
return (
20-
<div className="bg-alien-space-dark h-16 w-full flex items-center justify-center font-nasalization">
20+
<div className="bg-alien-space-dark h-14 w-full flex items-center justify-center font-nasalization">
2121
<div className="animate-pulse text-alien-gold">Loading...</div>
2222
</div>
2323
);
@@ -27,14 +27,14 @@ const Header = () => {
2727
<header
2828
className={`fixed top-0 left-0 w-full z-50 transition-all duration-500 ${
2929
isScrolled
30-
? "py-1 bg-black/95 backdrop-blur-md shadow-lg shadow-alien-gold/10"
31-
: "py-2 bg-black/90 backdrop-blur-sm"
30+
? "py-0.5 bg-black/95 backdrop-blur-md shadow-lg shadow-alien-gold/10"
31+
: "py-1 bg-black/90 backdrop-blur-sm"
3232
}`}
3333
>
34-
<div className="container mx-auto px-4 lg:px-6 flex justify-between items-center relative">
34+
<div className="container mx-auto px-4 lg:px-6 flex justify-between items-center relative py-2">
3535
<Logo />
3636
<DesktopNav />
37-
<div className="flex items-center gap-3">
37+
<div className="flex items-center gap-2">
3838
{!isMobile && <ConnectButton />}
3939
{isMobile && (
4040
<button
@@ -48,7 +48,7 @@ const Header = () => {
4848
data-state={isMenuOpen ? "open" : "closed"}
4949
>
5050
<div className={`transition-transform duration-300 ${isMenuOpen ? 'rotate-180' : ''}`}>
51-
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
51+
{isMenuOpen ? <X size={20} /> : <Menu size={20} />}
5252
</div>
5353
</button>
5454
)}

‎src/components/Layout.tsx‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,31 @@ import React from 'react';
33
import { Outlet } from 'react-router-dom';
44
import Header from './Header';
55
import Footer from './Footer';
6+
import StarBackground from './StarBackground';
67

78
const Layout: React.FC = () => {
89
return (
9-
<div className="flex flex-col min-h-screen bg-black">
10+
<div className="flex flex-col min-h-screen bg-black relative">
11+
{/* Fixed background image - positioned behind everything */}
12+
<div
13+
className="fixed inset-0 pointer-events-none"
14+
style={{
15+
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
16+
backgroundSize: 'cover',
17+
backgroundPosition: 'center',
18+
backgroundRepeat: 'no-repeat',
19+
opacity: 0.3,
20+
zIndex: -30
21+
}}
22+
/>
23+
24+
{/* Star background effect - also behind content */}
25+
<div className="fixed inset-0 pointer-events-none" style={{ zIndex: -20 }}>
26+
<StarBackground />
27+
</div>
28+
1029
<Header />
11-
<main className="flex-1 relative z-10 pt-20 lg:pt-24">
30+
<main className="flex-1 relative z-10 pt-16 lg:pt-20">
1231
<Outlet />
1332
</main>
1433
<Footer />

0 commit comments

Comments
 (0)