Skip to content

Commit 40cc042

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Resolve broken website display
Fixes the issue where the website was not displaying correctly, ensuring all components render as intended.
1 parent 0e44050 commit 40cc042

File tree

4 files changed

+109
-93
lines changed

4 files changed

+109
-93
lines changed

‎src/components/Header/index.tsx‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,59 @@
1+
12
import React from 'react';
2-
import StarBackground from '@/components/StarBackground';
3-
import Header from '@/components/Header';
4-
import Hero from '@/components/Hero';
5-
import ExploreSpacesSection from '@/components/ExploreSpacesSection';
6-
import EcosystemSection from '@/components/EcosystemSection';
7-
import FeaturesSection from '@/components/FeaturesSection';
8-
import FinancialFreedomSection from '@/components/FinancialFreedomSection';
9-
import ParticipationSection from '@/components/ParticipationSection';
10-
import Footer from '@/components/Footer';
11-
import Logo from '@/components/Header/Logo';
3+
import { AnimatePresence } from "framer-motion";
4+
import { Menu, X } from "lucide-react";
5+
import { useIsMobile } from "@/hooks/use-mobile";
6+
import { useScroll } from "@/hooks/use-scroll";
7+
import Logo from "@/components/Header/Logo";
8+
import DesktopNav from "@/components/Header/DesktopNav";
9+
import MobileNav from "@/components/Header/MobileNav";
10+
import ConnectButton from "@/components/Header/ConnectButton";
11+
import PriceTicker from "@/components/PriceTicker";
12+
13+
const Header = () => {
14+
const isScrolled = useScroll();
15+
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
16+
const isMobile = useIsMobile();
17+
18+
if (isMobile === undefined) {
19+
return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center">Cargando...</div>;
20+
}
1221

13-
const Index: React.FC = () => {
14-
return <div className="min-h-screen bg-alien-space">
15-
<div className="fixed inset-0 z-0" style={{
16-
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
17-
backgroundSize: 'cover',
18-
backgroundPosition: 'center',
19-
backgroundRepeat: 'no-repeat',
20-
opacity: 0.3
21-
}}></div>
22-
<StarBackground />
23-
<Header />
24-
<main className="relative z-10 pt-16">
25-
<Hero />
26-
<div className="container mx-auto text-center px-0 py-0">
27-
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-alien-gold font-[Atomic Age]">₿£€$$</h2>
28-
22+
return (
23+
<header
24+
className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
25+
isScrolled ? "py-3 bg-alien-space-dark/90 backdrop-blur-lg shadow-md" : "py-6 bg-transparent"
26+
}`}
27+
>
28+
<div className="container mx-auto px-4 flex justify-between items-center relative">
29+
<Logo />
30+
<DesktopNav />
31+
<div className="flex items-center gap-4">
32+
{!isMobile && <ConnectButton />}
33+
{isMobile && (
34+
<button
35+
onClick={() => setIsMenuOpen(!isMenuOpen)}
36+
className="p-2 text-alien-gold focus:outline-none focus:ring-2 focus:ring-alien-gold"
37+
aria-label={isMenuOpen ? "Cerrar menú de navegación" : "Abrir menú de navegación"}
38+
aria-expanded={isMenuOpen}
39+
aria-controls="mobile-menu"
40+
data-state={isMenuOpen ? "open" : "closed"}
41+
>
42+
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
43+
</button>
44+
)}
2945
</div>
30-
<FinancialFreedomSection />
31-
<ExploreSpacesSection />
32-
<EcosystemSection />
33-
<FeaturesSection />
34-
<ParticipationSection />
35-
</main>
36-
<Footer />
37-
</div>;
46+
</div>
47+
<AnimatePresence>
48+
{isMobile && isMenuOpen && (
49+
<MobileNav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
50+
)}
51+
</AnimatePresence>
52+
<div className="absolute left-0 right-0 bottom-0 translate-y-full w-full bg-alien-space-dark/80">
53+
<PriceTicker />
54+
</div>
55+
</header>
56+
);
3857
};
3958

40-
export default Index;
59+
export default Header;

‎src/components/Layout.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,23 @@ import React from 'react';
33
import { Outlet } from 'react-router-dom';
44
import Header from './Header';
55
import Footer from './Footer';
6-
import '../global.css';
76

87
const Layout: React.FC = () => {
98
return (
10-
<>
9+
<div className="flex flex-col min-h-screen">
1110
<Header />
12-
<div className="content-container">
11+
<div className="flex-1 content-container relative">
1312
<img
14-
src="/public/lovable-uploads/ALogo.png"
13+
src="/lovable-uploads/ALogo.png"
1514
alt="AlienFlowSpace Logo"
1615
className="background-logo"
1716
/>
18-
<div className="container">
17+
<div className="container mx-auto px-4">
1918
<Outlet />
2019
</div>
2120
</div>
2221
<Footer />
23-
</>
22+
</div>
2423
);
2524
};
2625

‎src/global.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,24 @@ body {
4444
flex: 1;
4545
z-index: 1;
4646
position: relative;
47+
margin-top: 4rem;
48+
}
49+
50+
/* Add text glow effect */
51+
.text-glow {
52+
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
53+
}
54+
55+
/* Add card border effect */
56+
.card-border {
57+
border: 1px solid rgba(255, 215, 0, 0.2);
58+
border-radius: 10px;
59+
background-color: rgba(17, 17, 25, 0.6);
60+
backdrop-filter: blur(5px);
61+
transition: all 0.3s ease;
62+
}
63+
64+
.card-border:hover {
65+
border-color: rgba(255, 215, 0, 0.4);
66+
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
4767
}

‎src/pages/Index.tsx‎

Lines changed: 30 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,37 @@
11

2-
import React from "react";
3-
import { AnimatePresence } from "framer-motion";
4-
import { Menu, X } from "lucide-react";
5-
import { useIsMobile } from "@/hooks/use-mobile";
6-
import { useScroll } from "@/hooks/use-scroll";
7-
import Logo from "@/components/Header/Logo";
8-
import DesktopNav from "@/components/Header/DesktopNav";
9-
import MobileNav from "@/components/Header/MobileNav";
10-
import ConnectButton from "@/components/Header/ConnectButton";
11-
import PriceTicker from "@/components/PriceTicker";
12-
13-
const Header = () => {
14-
const isScrolled = useScroll();
15-
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
16-
const isMobile = useIsMobile();
17-
18-
if (isMobile === undefined) {
19-
return <div className="bg-alien-space-dark h-16 w-full flex items-center justify-center">Cargando...</div>;
20-
}
2+
import React from 'react';
3+
import StarBackground from '@/components/StarBackground';
4+
import Hero from '@/components/Hero';
5+
import ExploreSpacesSection from '@/components/ExploreSpacesSection';
6+
import EcosystemSection from '@/components/EcosystemSection';
7+
import FeaturesSection from '@/components/FeaturesSection';
8+
import FinancialFreedomSection from '@/components/FinancialFreedomSection';
9+
import ParticipationSection from '@/components/ParticipationSection';
2110

11+
const Index: React.FC = () => {
2212
return (
23-
<header
24-
className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
25-
isScrolled ? "py-3 bg-alien-space-dark/90 backdrop-blur-lg shadow-md" : "py-6 bg-transparent"
26-
}`}
27-
>
28-
<div className="container mx-auto px-4 flex justify-between items-center relative">
29-
<Logo />
30-
<DesktopNav />
31-
<div className="flex items-center gap-4">
32-
{!isMobile && <ConnectButton />}
33-
{isMobile && (
34-
<button
35-
onClick={() => setIsMenuOpen(!isMenuOpen)}
36-
className="p-2 text-alien-gold focus:outline-none focus:ring-2 focus:ring-alien-gold"
37-
aria-label={isMenuOpen ? "Cerrar menú de navegación" : "Abrir menú de navegación"}
38-
aria-expanded={isMenuOpen}
39-
aria-controls="mobile-menu"
40-
data-state={isMenuOpen ? "open" : "closed"}
41-
>
42-
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
43-
</button>
44-
)}
13+
<div className="min-h-screen bg-alien-space">
14+
<div className="fixed inset-0 z-0" style={{
15+
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
16+
backgroundSize: 'cover',
17+
backgroundPosition: 'center',
18+
backgroundRepeat: 'no-repeat',
19+
opacity: 0.3
20+
}}></div>
21+
<StarBackground />
22+
<main className="relative z-10 pt-16">
23+
<Hero />
24+
<div className="container mx-auto text-center px-0 py-0">
25+
<h2 className="text-4xl md:text-5xl font-bold mb-4 text-alien-gold font-[Atomic Age]">₿£€$$</h2>
4526
</div>
46-
</div>
47-
<AnimatePresence>
48-
{isMobile && isMenuOpen && (
49-
<MobileNav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
50-
)}
51-
</AnimatePresence>
52-
<div className="absolute left-0 right-0 bottom-0 translate-y-full w-full bg-alien-space-dark/80">
53-
<PriceTicker />
54-
</div>
55-
</header>
27+
<FinancialFreedomSection />
28+
<ExploreSpacesSection />
29+
<EcosystemSection />
30+
<FeaturesSection />
31+
<ParticipationSection />
32+
</main>
33+
</div>
5634
);
5735
};
5836

59-
export default Header;
37+
export default Index;

0 commit comments

Comments
 (0)