Skip to content

Commit 555405c

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Optimize home page for performance
Improve home page loading speed and fix misplaced bullet point.
1 parent 76564cd commit 555405c

File tree

1 file changed

+123
-144
lines changed

1 file changed

+123
-144
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 123 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
12
import React, { useEffect } from 'react';
23
import { motion } from 'framer-motion';
3-
import { Bitcoin, TrendingUp, Shield, Coins, Zap, Globe } from 'lucide-react';
4-
import AnimatedText from './AnimatedText';
4+
import { Bitcoin, TrendingUp, Shield, Coins, Zap } from 'lucide-react';
5+
56
const FinancialFreedomSection = () => {
67
useEffect(() => {
78
// Load CoinMarketCap widget script
@@ -10,97 +11,94 @@ const FinancialFreedomSection = () => {
1011
script.src = 'https://files.coinmarketcap.com/static/widget/currency.js';
1112
script.async = true;
1213
document.head.appendChild(script);
14+
1315
return () => {
14-
// Cleanup scripts on unmount
1516
if (document.head.contains(script)) {
1617
document.head.removeChild(script);
1718
}
1819
};
1920
}, []);
20-
const benefits = [{
21-
icon: TrendingUp,
22-
title: "Scalable Growth",
23-
description: "Exponential potential"
24-
}, {
25-
icon: Shield,
26-
title: "Secure Storage",
27-
description: "Protected wealth"
28-
}, {
29-
icon: Zap,
30-
title: "Instant Transactions",
31-
description: "Real-time access"
32-
}, {
33-
icon: Coins,
34-
title: "Digital Assets",
35-
description: "NFTs & tokens"
36-
}];
37-
return <section className="py-20 relative overflow-hidden">
21+
22+
const benefits = [
23+
{
24+
icon: TrendingUp,
25+
title: "Scalable Growth",
26+
description: "Exponential potential"
27+
},
28+
{
29+
icon: Shield,
30+
title: "Secure Storage",
31+
description: "Protected wealth"
32+
},
33+
{
34+
icon: Zap,
35+
title: "Instant Transactions",
36+
description: "Real-time access"
37+
},
38+
{
39+
icon: Coins,
40+
title: "Digital Assets",
41+
description: "NFTs & tokens"
42+
}
43+
];
44+
45+
return (
46+
<section className="py-20 relative overflow-hidden">
3847
{/* Background gradient effect */}
3948
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
4049

4150
<div className="container mx-auto px-4 relative z-10">
4251
{/* Header Section - Two Line Title */}
43-
<motion.div initial={{
44-
opacity: 0,
45-
y: 30
46-
}} whileInView={{
47-
opacity: 1,
48-
y: 0
49-
}} transition={{
50-
duration: 0.8
51-
}} viewport={{
52-
once: true
53-
}} className="text-center mb-16">
52+
<motion.div
53+
initial={{ opacity: 0, y: 30 }}
54+
whileInView={{ opacity: 1, y: 0 }}
55+
transition={{ duration: 0.8 }}
56+
viewport={{ once: true }}
57+
className="text-center mb-16"
58+
>
5459
<div className="space-y-4">
55-
<h2 className="text-6xl text-alien-gold font-nasalization tracking-wider md:text-5xl font-bold">
60+
<h2 className="text-5xl md:text-6xl text-alien-gold font-nasalization tracking-wider font-bold">
5661
₿£€$$
5762
</h2>
58-
<h3 className="text-3xl font-bold text-alien-green font-nasalization tracking-wide md:text-4xl">
63+
<h3 className="text-2xl md:text-3xl font-bold text-alien-green font-nasalization tracking-wide">
5964
Financial Freedom for the Free Earth
6065
</h3>
6166
</div>
6267
</motion.div>
6368

6469
{/* Main Content - Centered Layout */}
6570
<div className="max-w-4xl mx-auto mb-16">
66-
<motion.div initial={{
67-
opacity: 0,
68-
y: 30
69-
}} whileInView={{
70-
opacity: 1,
71-
y: 0
72-
}} transition={{
73-
duration: 0.8,
74-
delay: 0.3
75-
}} viewport={{
76-
once: true
77-
}} className="card-border p-8 backdrop-blur-md text-center">
78-
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8">
71+
<motion.div
72+
initial={{ opacity: 0, y: 30 }}
73+
whileInView={{ opacity: 1, y: 0 }}
74+
transition={{ duration: 0.8, delay: 0.3 }}
75+
viewport={{ once: true }}
76+
className="card-border p-8 backdrop-blur-md text-center"
77+
>
78+
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8 text-center">
7979
Any individual or professional can understand the advantage of digital Money:
8080
</p>
8181

8282
<div className="space-y-6 text-center max-w-3xl mx-auto">
83-
<div className="flex items-center justify-center gap-4">
84-
<span className="text-alien-gold text-xl">·</span>
83+
<div className="text-center">
8584
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
86-
<span className="text-alien-gold font-semibold">Impartial Money:</span> that does not discriminate.
85+
<span className="text-alien-gold">·</span> <span className="text-alien-gold font-semibold">Impartial Money:</span> that does not discriminate.
8786
</p>
8887
</div>
8988

90-
<div className="flex items-center justify-center gap-4">
91-
<span className="text-alien-gold text-xl">·</span>
89+
<div className="text-center">
9290
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
93-
<span className="text-alien-green font-semibold">Decentralized Currencies:</span> Scalable and Stable with the Volatility for Safe Reserves of Values.
91+
<span className="text-alien-gold">·</span> <span className="text-alien-green font-semibold">Decentralized Currencies:</span> Scalable and Stable with the Volatility for Safe Reserves of Values.
9492
</p>
9593
</div>
9694
</div>
9795

9896
<div className="mt-8 space-y-4 text-center">
99-
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
97+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed text-center">
10098
Allowing individuals to <span className="text-alien-gold font-semibold">secure their wealth</span> while
10199
enjoying the benefits of a <span className="text-alien-green font-semibold">decentralized economy</span>.
102100
</p>
103-
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
101+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed text-center">
104102
Access with <span className="text-alien-gold font-semibold">Cryptokens and NFTs</span> to Order & Generate
105103
All Types of Experiences, Products & Services According to your Demands
106104
<span className="text-alien-green font-semibold"> Instantly</span>...
@@ -110,131 +108,112 @@ const FinancialFreedomSection = () => {
110108
</div>
111109

112110
{/* Benefits Grid - Smaller and Complementary */}
113-
<motion.div initial={{
114-
opacity: 0,
115-
y: 30
116-
}} whileInView={{
117-
opacity: 1,
118-
y: 0
119-
}} transition={{
120-
duration: 0.8,
121-
delay: 0.4
122-
}} viewport={{
123-
once: true
124-
}} className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto">
125-
{benefits.map((benefit, index) => <motion.div key={index} initial={{
126-
opacity: 0,
127-
y: 20
128-
}} whileInView={{
129-
opacity: 1,
130-
y: 0
131-
}} transition={{
132-
duration: 0.5,
133-
delay: 0.1 * index
134-
}} viewport={{
135-
once: true
136-
}} className="card-border p-4 text-center hover:scale-105 transition-transform duration-300">
111+
<motion.div
112+
initial={{ opacity: 0, y: 30 }}
113+
whileInView={{ opacity: 1, y: 0 }}
114+
transition={{ duration: 0.8, delay: 0.4 }}
115+
viewport={{ once: true }}
116+
className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto"
117+
>
118+
{benefits.map((benefit, index) => (
119+
<motion.div
120+
key={index}
121+
initial={{ opacity: 0, y: 20 }}
122+
whileInView={{ opacity: 1, y: 0 }}
123+
transition={{ duration: 0.5, delay: 0.1 * index }}
124+
viewport={{ once: true }}
125+
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
126+
>
137127
<benefit.icon className="h-6 w-6 text-alien-gold mx-auto mb-2" />
138128
<h5 className="font-bold text-xs text-alien-green font-nasalization mb-1">
139129
{benefit.title}
140130
</h5>
141131
<p className="text-xs text-gray-400 font-[Exo]">
142132
{benefit.description}
143133
</p>
144-
</motion.div>)}
134+
</motion.div>
135+
))}
145136
</motion.div>
146137

147138
{/* ABTC Token Highlight */}
148-
<motion.div initial={{
149-
opacity: 0,
150-
scale: 0.9
151-
}} whileInView={{
152-
opacity: 1,
153-
scale: 1
154-
}} transition={{
155-
duration: 0.8,
156-
delay: 0.5
157-
}} viewport={{
158-
once: true
159-
}} className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden mb-12">
139+
<motion.div
140+
initial={{ opacity: 0, scale: 0.9 }}
141+
whileInView={{ opacity: 1, scale: 1 }}
142+
transition={{ duration: 0.8, delay: 0.5 }}
143+
viewport={{ once: true }}
144+
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden mb-12"
145+
>
160146
{/* Background decorative elements */}
161147
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 via-transparent to-alien-green/5" />
162148
<div className="absolute top-0 left-0 w-32 h-32 bg-alien-gold/10 rounded-full blur-3xl" />
163149
<div className="absolute bottom-0 right-0 w-32 h-32 bg-alien-green/10 rounded-full blur-3xl" />
164150

165151
<div className="relative z-10">
166-
<motion.h3 initial={{
167-
opacity: 0,
168-
y: 20
169-
}} whileInView={{
170-
opacity: 1,
171-
y: 0
172-
}} transition={{
173-
duration: 0.6,
174-
delay: 0.6
175-
}} viewport={{
176-
once: true
177-
}} className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization">
152+
<motion.h3
153+
initial={{ opacity: 0, y: 20 }}
154+
whileInView={{ opacity: 1, y: 0 }}
155+
transition={{ duration: 0.6, delay: 0.6 }}
156+
viewport={{ once: true }}
157+
className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization"
158+
>
178159
A₿tc <span className="text-sm text-gray-400">(Aurum nostrum non est aurum vulgi)</span>
179160
</motion.h3>
180161

181-
<motion.p initial={{
182-
opacity: 0,
183-
y: 20
184-
}} whileInView={{
185-
opacity: 1,
186-
y: 0
187-
}} transition={{
188-
duration: 0.6,
189-
delay: 0.7
190-
}} viewport={{
191-
once: true
192-
}} className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto">
162+
<motion.p
163+
initial={{ opacity: 0, y: 20 }}
164+
whileInView={{ opacity: 1, y: 0 }}
165+
transition={{ duration: 0.6, delay: 0.7 }}
166+
viewport={{ once: true }}
167+
className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto"
168+
>
193169
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold,
194170
providing <span className="text-alien-green font-semibold">scalability</span>,
195171
<span className="text-alien-gold font-semibold"> stability</span> and
196172
<span className="text-alien-green font-semibold"> growth potential (Φπ)</span>...
197173
</motion.p>
198174

199-
<motion.div initial={{
200-
opacity: 0,
201-
scale: 0.9
202-
}} whileInView={{
203-
opacity: 1,
204-
scale: 1
205-
}} transition={{
206-
duration: 0.6,
207-
delay: 0.8
208-
}} viewport={{
209-
once: true
210-
}} className="inline-flex items-center gap-3 bg-gradient-to-r from-alien-space-dark to-alien-space px-6 py-3 rounded-full border border-alien-green/30 mb-8">
175+
<motion.div
176+
initial={{ opacity: 0, scale: 0.9 }}
177+
whileInView={{ opacity: 1, scale: 1 }}
178+
transition={{ duration: 0.6, delay: 0.8 }}
179+
viewport={{ once: true }}
180+
className="inline-flex items-center gap-3 bg-gradient-to-r from-alien-space-dark to-alien-space px-6 py-3 rounded-full border border-alien-green/30 mb-8"
181+
>
211182
<Bitcoin className="h-5 w-5 text-alien-gold" />
212183
<span className="text-alien-green font-semibold font-[Exo]">Bitcoin-backed</span>
213184
<span className="text-gray-400">•</span>
214185
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
215186
</motion.div>
216187

217-
{/* CoinMarketCap Widget - Solo este */}
218-
<motion.div initial={{
219-
opacity: 0,
220-
y: 20
221-
}} whileInView={{
222-
opacity: 1,
223-
y: 0
224-
}} transition={{
225-
duration: 0.6,
226-
delay: 0.9
227-
}} viewport={{
228-
once: true
229-
}} className="max-w-2xl mx-auto">
188+
{/* CoinMarketCap Widget */}
189+
<motion.div
190+
initial={{ opacity: 0, y: 20 }}
191+
whileInView={{ opacity: 1, y: 0 }}
192+
transition={{ duration: 0.6, delay: 0.9 }}
193+
viewport={{ once: true }}
194+
className="max-w-2xl mx-auto"
195+
>
230196
<div className="bg-alien-space-dark/50 rounded-lg border border-alien-gold/20 p-6">
231197
<h4 className="text-lg font-bold text-alien-gold font-nasalization mb-4 text-center">Bitcoin Price</h4>
232-
<div className="coinmarketcap-currency-widget" data-currencyid="1" data-base="USD" data-secondary="BTC" data-ticker="true" data-rank="true" data-marketcap="true" data-volume="true" data-statsticker="true" data-stats="USD"></div>
198+
<div
199+
className="coinmarketcap-currency-widget"
200+
data-currencyid="1"
201+
data-base="USD"
202+
data-secondary="BTC"
203+
data-ticker="true"
204+
data-rank="true"
205+
data-marketcap="true"
206+
data-volume="true"
207+
data-statsticker="true"
208+
data-stats="USD"
209+
></div>
233210
</div>
234211
</motion.div>
235212
</div>
236213
</motion.div>
237214
</div>
238-
</section>;
215+
</section>
216+
);
239217
};
240-
export default FinancialFreedomSection;
218+
219+
export default FinancialFreedomSection;

0 commit comments

Comments
 (0)