Skip to content

Commit 63e0c53

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Visual edit in Lovable
Edited UI in Lovable
1 parent a047233 commit 63e0c53

File tree

1 file changed

+130
-113
lines changed

1 file changed

+130
-113
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 130 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
21
import React, { useEffect } from 'react';
32
import { motion } from 'framer-motion';
43
import { Bitcoin, TrendingUp, Shield, Coins, Zap, Globe } from 'lucide-react';
54
import AnimatedText from './AnimatedText';
6-
75
const FinancialFreedomSection = () => {
86
useEffect(() => {
97
// Load CoinMarketCap widget script
@@ -12,54 +10,49 @@ const FinancialFreedomSection = () => {
1210
script.src = 'https://files.coinmarketcap.com/static/widget/currency.js';
1311
script.async = true;
1412
document.head.appendChild(script);
15-
1613
return () => {
1714
// Cleanup scripts on unmount
1815
if (document.head.contains(script)) {
1916
document.head.removeChild(script);
2017
}
2118
};
2219
}, []);
23-
24-
const benefits = [
25-
{
26-
icon: TrendingUp,
27-
title: "Scalable Growth",
28-
description: "Exponential potential"
29-
},
30-
{
31-
icon: Shield,
32-
title: "Secure Storage",
33-
description: "Protected wealth"
34-
},
35-
{
36-
icon: Zap,
37-
title: "Instant Transactions",
38-
description: "Real-time access"
39-
},
40-
{
41-
icon: Coins,
42-
title: "Digital Assets",
43-
description: "NFTs & tokens"
44-
}
45-
];
46-
47-
return (
48-
<section className="py-20 relative overflow-hidden">
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">
4938
{/* Background gradient effect */}
5039
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
5140

5241
<div className="container mx-auto px-4 relative z-10">
5342
{/* Header Section - Two Line Title */}
54-
<motion.div
55-
initial={{ opacity: 0, y: 30 }}
56-
whileInView={{ opacity: 1, y: 0 }}
57-
transition={{ duration: 0.8 }}
58-
viewport={{ once: true }}
59-
className="text-center mb-16"
60-
>
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">
6154
<div className="space-y-4">
62-
<h2 className="text-6xl md:text-8xl font-bold text-alien-gold font-nasalization tracking-wider">
55+
<h2 className="text-6xl text-alien-gold font-nasalization tracking-wider md:text-5xl font-bold">
6356
₿£€$$
6457
</h2>
6558
<h3 className="text-3xl md:text-5xl font-bold text-alien-green font-nasalization tracking-wide">
@@ -70,13 +63,18 @@ const FinancialFreedomSection = () => {
7063

7164
{/* Main Content - Centered Layout */}
7265
<div className="max-w-4xl mx-auto mb-16">
73-
<motion.div
74-
initial={{ opacity: 0, y: 30 }}
75-
whileInView={{ opacity: 1, y: 0 }}
76-
transition={{ duration: 0.8, delay: 0.3 }}
77-
viewport={{ once: true }}
78-
className="card-border p-8 backdrop-blur-md text-center"
79-
>
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">
8078
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8">
8179
Any individual or professional can understand the advantage of digital Money:
8280
</p>
@@ -112,112 +110,131 @@ const FinancialFreedomSection = () => {
112110
</div>
113111

114112
{/* Benefits Grid - Smaller and Complementary */}
115-
<motion.div
116-
initial={{ opacity: 0, y: 30 }}
117-
whileInView={{ opacity: 1, y: 0 }}
118-
transition={{ duration: 0.8, delay: 0.4 }}
119-
viewport={{ once: true }}
120-
className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto"
121-
>
122-
{benefits.map((benefit, index) => (
123-
<motion.div
124-
key={index}
125-
initial={{ opacity: 0, y: 20 }}
126-
whileInView={{ opacity: 1, y: 0 }}
127-
transition={{ duration: 0.5, delay: 0.1 * index }}
128-
viewport={{ once: true }}
129-
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
130-
>
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">
131137
<benefit.icon className="h-6 w-6 text-alien-gold mx-auto mb-2" />
132138
<h5 className="font-bold text-xs text-alien-green font-nasalization mb-1">
133139
{benefit.title}
134140
</h5>
135141
<p className="text-xs text-gray-400 font-[Exo]">
136142
{benefit.description}
137143
</p>
138-
</motion.div>
139-
))}
144+
</motion.div>)}
140145
</motion.div>
141146

142147
{/* ABTC Token Highlight */}
143-
<motion.div
144-
initial={{ opacity: 0, scale: 0.9 }}
145-
whileInView={{ opacity: 1, scale: 1 }}
146-
transition={{ duration: 0.8, delay: 0.5 }}
147-
viewport={{ once: true }}
148-
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden mb-12"
149-
>
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">
150160
{/* Background decorative elements */}
151161
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 via-transparent to-alien-green/5" />
152162
<div className="absolute top-0 left-0 w-32 h-32 bg-alien-gold/10 rounded-full blur-3xl" />
153163
<div className="absolute bottom-0 right-0 w-32 h-32 bg-alien-green/10 rounded-full blur-3xl" />
154164

155165
<div className="relative z-10">
156-
<motion.h3
157-
initial={{ opacity: 0, y: 20 }}
158-
whileInView={{ opacity: 1, y: 0 }}
159-
transition={{ duration: 0.6, delay: 0.6 }}
160-
viewport={{ once: true }}
161-
className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization"
162-
>
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">
163178
A₿tc <span className="text-sm text-gray-400">(Aurum nostrum non est aurum vulgi)</span>
164179
</motion.h3>
165180

166-
<motion.p
167-
initial={{ opacity: 0, y: 20 }}
168-
whileInView={{ opacity: 1, y: 0 }}
169-
transition={{ duration: 0.6, delay: 0.7 }}
170-
viewport={{ once: true }}
171-
className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto"
172-
>
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">
173193
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold,
174194
providing <span className="text-alien-green font-semibold">scalability</span>,
175195
<span className="text-alien-gold font-semibold"> stability</span> and
176196
<span className="text-alien-green font-semibold"> growth potential (Φπ)</span>...
177197
</motion.p>
178198

179-
<motion.div
180-
initial={{ opacity: 0, scale: 0.9 }}
181-
whileInView={{ opacity: 1, scale: 1 }}
182-
transition={{ duration: 0.6, delay: 0.8 }}
183-
viewport={{ once: true }}
184-
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"
185-
>
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">
186211
<Bitcoin className="h-5 w-5 text-alien-gold" />
187212
<span className="text-alien-green font-semibold font-[Exo]">Bitcoin-backed</span>
188213
<span className="text-gray-400">•</span>
189214
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
190215
</motion.div>
191216

192217
{/* CoinMarketCap Widget - Solo este */}
193-
<motion.div
194-
initial={{ opacity: 0, y: 20 }}
195-
whileInView={{ opacity: 1, y: 0 }}
196-
transition={{ duration: 0.6, delay: 0.9 }}
197-
viewport={{ once: true }}
198-
className="max-w-2xl mx-auto"
199-
>
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">
200230
<div className="bg-alien-space-dark/50 rounded-lg border border-alien-gold/20 p-6">
201231
<h4 className="text-lg font-bold text-alien-gold font-nasalization mb-4 text-center">Bitcoin Price</h4>
202-
<div
203-
className="coinmarketcap-currency-widget"
204-
data-currencyid="1"
205-
data-base="USD"
206-
data-secondary="BTC"
207-
data-ticker="true"
208-
data-rank="true"
209-
data-marketcap="true"
210-
data-volume="true"
211-
data-statsticker="true"
212-
data-stats="USD"
213-
></div>
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>
214233
</div>
215234
</motion.div>
216235
</div>
217236
</motion.div>
218237
</div>
219-
</section>
220-
);
238+
</section>;
221239
};
222-
223-
export default FinancialFreedomSection;
240+
export default FinancialFreedomSection;

0 commit comments

Comments
 (0)