Skip to content

Commit 32a1e89

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Visual edit in Lovable
Edited UI in Lovable
1 parent d40c443 commit 32a1e89

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,8 +1,6 @@
1-
21
import React, { useEffect } from 'react';
32
import { motion } from 'framer-motion';
43
import { Bitcoin, TrendingUp, Shield, Coins, Zap } from 'lucide-react';
5-
64
const FinancialFreedomSection = () => {
75
useEffect(() => {
86
// Load CoinMarketCap widget script
@@ -11,51 +9,46 @@ const FinancialFreedomSection = () => {
119
script.src = 'https://files.coinmarketcap.com/static/widget/currency.js';
1210
script.async = true;
1311
document.head.appendChild(script);
14-
1512
return () => {
1613
if (document.head.contains(script)) {
1714
document.head.removeChild(script);
1815
}
1916
};
2017
}, []);
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">
18+
const benefits = [{
19+
icon: TrendingUp,
20+
title: "Scalable Growth",
21+
description: "Exponential potential"
22+
}, {
23+
icon: Shield,
24+
title: "Secure Storage",
25+
description: "Protected wealth"
26+
}, {
27+
icon: Zap,
28+
title: "Instant Transactions",
29+
description: "Real-time access"
30+
}, {
31+
icon: Coins,
32+
title: "Digital Assets",
33+
description: "NFTs & tokens"
34+
}];
35+
return <section className="py-20 relative overflow-hidden">
4736
{/* Background gradient effect */}
4837
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
4938

5039
<div className="container mx-auto px-4 relative z-10">
5140
{/* Header Section - Two Line Title */}
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-
>
41+
<motion.div initial={{
42+
opacity: 0,
43+
y: 30
44+
}} whileInView={{
45+
opacity: 1,
46+
y: 0
47+
}} transition={{
48+
duration: 0.8
49+
}} viewport={{
50+
once: true
51+
}} className="text-center mb-16">
5952
<div className="space-y-4">
6053
<h2 className="text-5xl md:text-6xl text-alien-gold font-nasalization tracking-wider font-bold">
6154
₿£€$$
@@ -68,13 +61,18 @@ const FinancialFreedomSection = () => {
6861

6962
{/* Main Content - Centered Layout */}
7063
<div className="max-w-4xl mx-auto mb-16">
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-
>
64+
<motion.div initial={{
65+
opacity: 0,
66+
y: 30
67+
}} whileInView={{
68+
opacity: 1,
69+
y: 0
70+
}} transition={{
71+
duration: 0.8,
72+
delay: 0.3
73+
}} viewport={{
74+
once: true
75+
}} className="card-border p-8 backdrop-blur-md text-center">
7876
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8 text-center">
7977
Any individual or professional can understand the advantage of digital Money:
8078
</p>
@@ -108,112 +106,131 @@ const FinancialFreedomSection = () => {
108106
</div>
109107

110108
{/* Benefits Grid - Smaller and Complementary */}
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-
>
109+
<motion.div initial={{
110+
opacity: 0,
111+
y: 30
112+
}} whileInView={{
113+
opacity: 1,
114+
y: 0
115+
}} transition={{
116+
duration: 0.8,
117+
delay: 0.4
118+
}} viewport={{
119+
once: true
120+
}} className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto">
121+
{benefits.map((benefit, index) => <motion.div key={index} initial={{
122+
opacity: 0,
123+
y: 20
124+
}} whileInView={{
125+
opacity: 1,
126+
y: 0
127+
}} transition={{
128+
duration: 0.5,
129+
delay: 0.1 * index
130+
}} viewport={{
131+
once: true
132+
}} className="card-border p-4 text-center hover:scale-105 transition-transform duration-300">
127133
<benefit.icon className="h-6 w-6 text-alien-gold mx-auto mb-2" />
128134
<h5 className="font-bold text-xs text-alien-green font-nasalization mb-1">
129135
{benefit.title}
130136
</h5>
131137
<p className="text-xs text-gray-400 font-[Exo]">
132138
{benefit.description}
133139
</p>
134-
</motion.div>
135-
))}
140+
</motion.div>)}
136141
</motion.div>
137142

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

151161
<div className="relative z-10">
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-
>
159-
A₿tc <span className="text-sm text-gray-400">(Aurum nostrum non est aurum vulgi)</span>
162+
<motion.h3 initial={{
163+
opacity: 0,
164+
y: 20
165+
}} whileInView={{
166+
opacity: 1,
167+
y: 0
168+
}} transition={{
169+
duration: 0.6,
170+
delay: 0.6
171+
}} viewport={{
172+
once: true
173+
}} className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization">
174+
A₿tc <span className="text-sm text-[#03ff19]">(Aurum nostrum non est aurum vulgi)</span>
160175
</motion.h3>
161176

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-
>
177+
<motion.p initial={{
178+
opacity: 0,
179+
y: 20
180+
}} whileInView={{
181+
opacity: 1,
182+
y: 0
183+
}} transition={{
184+
duration: 0.6,
185+
delay: 0.7
186+
}} viewport={{
187+
once: true
188+
}} className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto">
169189
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold,
170190
providing <span className="text-alien-green font-semibold">scalability</span>,
171191
<span className="text-alien-gold font-semibold"> stability</span> and
172192
<span className="text-alien-green font-semibold"> growth potential (Φπ)</span>...
173193
</motion.p>
174194

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-
>
195+
<motion.div initial={{
196+
opacity: 0,
197+
scale: 0.9
198+
}} whileInView={{
199+
opacity: 1,
200+
scale: 1
201+
}} transition={{
202+
duration: 0.6,
203+
delay: 0.8
204+
}} viewport={{
205+
once: true
206+
}} 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">
182207
<Bitcoin className="h-5 w-5 text-alien-gold" />
183208
<span className="text-alien-green font-semibold font-[Exo]">Bitcoin-backed</span>
184209
<span className="text-gray-400">•</span>
185210
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
186211
</motion.div>
187212

188213
{/* 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-
>
214+
<motion.div initial={{
215+
opacity: 0,
216+
y: 20
217+
}} whileInView={{
218+
opacity: 1,
219+
y: 0
220+
}} transition={{
221+
duration: 0.6,
222+
delay: 0.9
223+
}} viewport={{
224+
once: true
225+
}} className="max-w-2xl mx-auto">
196226
<div className="bg-alien-space-dark/50 rounded-lg border border-alien-gold/20 p-6">
197227
<h4 className="text-lg font-bold text-alien-gold font-nasalization mb-4 text-center">Bitcoin Price</h4>
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>
228+
<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>
210229
</div>
211230
</motion.div>
212231
</div>
213232
</motion.div>
214233
</div>
215-
</section>
216-
);
234+
</section>;
217235
};
218-
219-
export default FinancialFreedomSection;
236+
export default FinancialFreedomSection;

0 commit comments

Comments
 (0)