Skip to content

Commit 6d696e5

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix spacing and design, add CoinMarketCap widget
- Reduced spacing in FinancialFreedomSection. - Updated content and symbols in FinancialFreedomSection. - Added CoinMarketCap widget. - Applied official background to all pages. - Improved About page design and navigation. - Addressed page loading issue.
1 parent 4c9acea commit 6d696e5

File tree

3 files changed

+102
-76
lines changed

3 files changed

+102
-76
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 66 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,95 @@
11

2-
import React from 'react';
2+
import React, { useEffect } from 'react';
33
import { motion } from 'framer-motion';
4-
import { Bitcoin, Landmark, Coins } from 'lucide-react';
4+
import { Bitcoin, TrendingUp, Shield } from 'lucide-react';
55
import AnimatedText from './AnimatedText';
66

77
const FinancialFreedomSection = () => {
8+
useEffect(() => {
9+
// Load CoinMarketCap widget script
10+
const script = document.createElement('script');
11+
script.type = 'text/javascript';
12+
script.src = 'https://files.coinmarketcap.com/static/widget/currency.js';
13+
script.async = true;
14+
document.head.appendChild(script);
15+
16+
return () => {
17+
// Cleanup script on unmount
18+
if (document.head.contains(script)) {
19+
document.head.removeChild(script);
20+
}
21+
};
22+
}, []);
23+
824
return (
9-
<section className="py-20 relative overflow-hidden">
25+
<section className="py-16 relative overflow-hidden">
1026
<div className="container mx-auto px-4">
1127
<motion.div
12-
initial={{
13-
opacity: 0,
14-
}}
15-
whileInView={{
16-
opacity: 1,
17-
}}
18-
transition={{
19-
duration: 0.8,
20-
}}
21-
viewport={{
22-
once: true,
23-
}}
24-
className="text-center mb-12"
28+
initial={{ opacity: 0 }}
29+
whileInView={{ opacity: 1 }}
30+
transition={{ duration: 0.8 }}
31+
viewport={{ once: true }}
32+
className="text-center mb-8"
2533
>
26-
<h2 className="text-4xl font-bold mb-6 text-alien-gold text-glow font-nasalization">
27-
Financial Freedom
34+
<h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-nasalization">
35+
₿£€$$
2836
</h2>
37+
<h3 className="text-3xl font-bold mb-6 text-alien-gold text-glow font-nasalization">
38+
Financial Freedom
39+
</h3>
2940

30-
<div className="flex justify-center mb-8">
31-
<Bitcoin className="text-alien-gold h-16 w-16 mr-4" />
32-
<Landmark className="text-alien-green h-16 w-16 mx-4" />
33-
<Coins className="text-alien-gold h-16 w-16 ml-4" />
41+
<div className="flex justify-center mb-6 gap-8">
42+
<Bitcoin className="text-alien-gold h-12 w-12" />
43+
<TrendingUp className="text-alien-green h-12 w-12" />
44+
<Shield className="text-alien-gold h-12 w-12" />
3445
</div>
3546

36-
<AnimatedText className="text-xl max-w-5xl mx-auto text-gray-300 font-[Exo] leading-relaxed">
37-
Any Individual or Professional can Understand the Advantage of Digital Money: Impartial Money that does not discriminate, Decentralized Currencies, Scalable and Stable with the Volatility. Safe Reserves of Values, allowing individuals to secure their wealth while enjoying the benefits of a decentralized economy.
38-
</AnimatedText>
39-
<AnimatedText className="text-xl max-w-5xl mx-auto text-gray-300 font-[Exo] leading-relaxed mt-4">
40-
Access with Cryptokens and NFTs to Order & Generate All Types of Experiences, Products & Services According to your Demands Instantly...
41-
</AnimatedText>
47+
<div className="max-w-5xl mx-auto space-y-4 mb-8">
48+
<AnimatedText className="text-lg text-gray-300 font-[Exo] leading-relaxed">
49+
Any Individual or Professional can Understand the Advantage of Digital Money:
50+
</AnimatedText>
51+
<AnimatedText className="text-lg text-gray-300 font-[Exo] leading-relaxed">
52+
Impartial Money that does not discriminate, Decentralized Currencies, Scalable and Stable with the Volatility for Safe Reserves of Values, allowing individuals to secure their wealth while enjoying the benefits of a decentralized economy.
53+
</AnimatedText>
54+
<AnimatedText className="text-lg text-gray-300 font-[Exo] leading-relaxed">
55+
Access with Cryptokens and NFTs to Order & Generate All Types of Experiences, Products & Services According to your Demands Instantly...
56+
</AnimatedText>
57+
</div>
4258
</motion.div>
4359

4460
{/* ABTC Token Highlight */}
4561
<motion.div
46-
initial={{
47-
opacity: 0,
48-
scale: 0.9,
49-
}}
50-
whileInView={{
51-
opacity: 1,
52-
scale: 1,
53-
}}
54-
transition={{
55-
duration: 0.8,
56-
delay: 0.5,
57-
}}
58-
viewport={{
59-
once: true,
60-
}}
61-
className="card-border p-8 max-w-3xl mx-auto text-center"
62+
initial={{ opacity: 0, scale: 0.9 }}
63+
whileInView={{ opacity: 1, scale: 1 }}
64+
transition={{ duration: 0.8, delay: 0.3 }}
65+
viewport={{ once: true }}
66+
className="card-border p-6 max-w-4xl mx-auto text-center mb-8"
6267
>
6368
<h3 className="text-2xl font-bold mb-3 text-alien-gold font-nasalization">
6469
A₿tc (Aurum nostrum non est aurum vulgi)
6570
</h3>
6671
<p className="text-gray-300 mb-4 font-[Exo]">
6772
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold, providing scalability, stability and growth potential (Φπ)...
6873
</p>
69-
<div className="inline-block bg-alien-space-dark px-4 py-2 rounded-full text-alien-green border border-alien-green/30">
74+
<div className="inline-block bg-alien-space-dark px-4 py-2 rounded-full text-alien-green border border-alien-green/30 mb-6">
7075
• Bitcoin-backed + Interoperable
7176
</div>
77+
78+
{/* CoinMarketCap Widget */}
79+
<div className="mt-6 flex justify-center">
80+
<div
81+
className="coinmarketcap-currency-widget"
82+
data-currencyid="1"
83+
data-base="USD"
84+
data-secondary="BTC"
85+
data-ticker="true"
86+
data-rank="true"
87+
data-marketcap="true"
88+
data-volume="true"
89+
data-statsticker="true"
90+
data-stats="USD"
91+
></div>
92+
</div>
7293
</motion.div>
7394
</div>
7495
</section>

‎src/components/Layout.tsx‎

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

2-
import React from 'react';
3-
import { Outlet } from 'react-router-dom';
2+
import React, { useEffect } from 'react';
3+
import { Outlet, useLocation } from 'react-router-dom';
44
import Header from './Header';
55
import Footer from './Footer';
66
import StarBackground from './StarBackground';
77

88
const Layout: React.FC = () => {
9+
const location = useLocation();
10+
11+
// Scroll to top when route changes
12+
useEffect(() => {
13+
window.scrollTo(0, 0);
14+
}, [location.pathname]);
15+
916
return (
1017
<div className="flex flex-col min-h-screen bg-black relative">
1118
{/* Fixed background image - positioned behind everything */}

‎src/pages/About.tsx‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
11
import React from "react";
2-
import StarBackground from "@/components/StarBackground";
32
import { Button } from "@/components/ui/button";
3+
import { Link } from "react-router-dom";
4+
import { GraduationCap, Users, Trophy } from "lucide-react";
45

56
const About: React.FC = () => {
67
return (
7-
<div className="relative flex flex-col flex-1 bg-alien-space">
8-
{/* Fondo de estrellas */}
9-
<StarBackground />
10-
{/* Fondo principal: debe ser absolute y -z-10 */}
11-
<div
12-
className="absolute inset-0 -z-10 bg-cover bg-center bg-no-repeat pointer-events-none"
13-
style={{
14-
backgroundImage: `url('/lovable-uploads/EMWBack.png')`,
15-
}}
16-
>
17-
<div className="w-full h-full bg-black/50" />
18-
</div>
8+
<div className="relative flex flex-col flex-1">
199
{/* Contenido principal */}
20-
<main className="relative z-10 flex-grow container mx-auto px-4 pt-24 pb-16">
10+
<main className="relative z-10 flex-grow container mx-auto px-4 pt-8 pb-16">
2111
<div className="max-w-4xl mx-auto">
2212
<h1 className="text-4xl md:text-5xl font-bold text-alien-gold mb-4 font-nasalization">
2313
We offer INNOVATIVE SOLUTIONS with cutting-edge
@@ -48,6 +38,7 @@ const About: React.FC = () => {
4838
and secure way. [...]
4939
</p>
5040
</div>
41+
5142
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
5243
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
5344
<h3 className="text-xl font-semibold text-alien-gold mb-3 font-nasalization">
@@ -95,6 +86,7 @@ const About: React.FC = () => {
9586
</p>
9687
</div>
9788
</div>
89+
9890
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
9991
<h3 className="text-2xl font-semibold text-alien-green mb-4 font-nasalization">
10092
Our mission
@@ -122,23 +114,29 @@ const About: React.FC = () => {
122114
sustainability, and more.
123115
</p>
124116
</div>
117+
118+
{/* Navigation Buttons */}
125119
<div className="flex flex-wrap justify-center gap-6 mb-8">
126-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
127-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
128-
Academy
129-
</h4>
130-
</div>
131-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
132-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
133-
CoNetworking
134-
</h4>
135-
</div>
136-
<div className="bg-alien-space-dark/80 p-4 rounded-lg backdrop-blur-md border border-alien-gold/20 text-center w-48">
137-
<h4 className="text-alien-gold font-semibold mb-2 font-nasalization">
138-
Club
139-
</h4>
140-
</div>
120+
<Link to="/academy">
121+
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark p-6 rounded-lg text-center w-48 h-20 flex flex-col items-center justify-center">
122+
<GraduationCap className="h-6 w-6 mb-2" />
123+
<span className="font-semibold font-nasalization">Academy</span>
124+
</Button>
125+
</Link>
126+
<Link to="/conetworking">
127+
<Button className="bg-alien-green hover:bg-alien-green-light text-alien-space-dark p-6 rounded-lg text-center w-48 h-20 flex flex-col items-center justify-center">
128+
<Users className="h-6 w-6 mb-2" />
129+
<span className="font-semibold font-nasalization">CoNetworking</span>
130+
</Button>
131+
</Link>
132+
<Link to="/clubs">
133+
<Button className="bg-alien-gold hover:bg-alien-gold-light text-alien-space-dark p-6 rounded-lg text-center w-48 h-20 flex flex-col items-center justify-center">
134+
<Trophy className="h-6 w-6 mb-2" />
135+
<span className="font-semibold font-nasalization">Club</span>
136+
</Button>
137+
</Link>
141138
</div>
139+
142140
<div className="bg-alien-space-dark/60 p-6 rounded-lg backdrop-blur-md border border-alien-gold/20">
143141
<p className="mb-6">
144142
Acquire Cryptos, NFTs, Tokens to Associate

0 commit comments

Comments
 (0)