Skip to content

Commit a80132a

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor Financial Freedom section
Improve the Financial Freedom section on the home page.
1 parent 4aa1dee commit a80132a

File tree

1 file changed

+188
-54
lines changed

1 file changed

+188
-54
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 188 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

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

77
const FinancialFreedomSection = () => {
@@ -21,74 +21,208 @@ const FinancialFreedomSection = () => {
2121
};
2222
}, []);
2323

24+
const benefits = [
25+
{
26+
icon: Bitcoin,
27+
title: "Impartial Money",
28+
description: "Does not discriminate"
29+
},
30+
{
31+
icon: Globe,
32+
title: "Decentralized",
33+
description: "Global accessibility"
34+
},
35+
{
36+
icon: TrendingUp,
37+
title: "Scalable & Stable",
38+
description: "Growth potential"
39+
},
40+
{
41+
icon: Shield,
42+
title: "Safe Reserves",
43+
description: "Secure wealth storage"
44+
},
45+
{
46+
icon: Zap,
47+
title: "Instant Access",
48+
description: "Immediate transactions"
49+
},
50+
{
51+
icon: Coins,
52+
title: "Crypto & NFTs",
53+
description: "Digital experiences"
54+
}
55+
];
56+
2457
return (
25-
<section className="py-16 relative overflow-hidden">
26-
<div className="container mx-auto px-4">
58+
<section className="py-20 relative overflow-hidden">
59+
{/* Background gradient effect */}
60+
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
61+
62+
<div className="container mx-auto px-4 relative z-10">
63+
{/* Header Section */}
2764
<motion.div
28-
initial={{ opacity: 0 }}
29-
whileInView={{ opacity: 1 }}
65+
initial={{ opacity: 0, y: 30 }}
66+
whileInView={{ opacity: 1, y: 0 }}
3067
transition={{ duration: 0.8 }}
3168
viewport={{ once: true }}
32-
className="text-center mb-8"
69+
className="text-center mb-16"
3370
>
34-
<h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-nasalization">
35-
₿£€$$
36-
</h2>
37-
<h3 className="text-3xl font-bold mb-6 text-alien-gold text-glow font-nasalization">
71+
<div className="inline-block relative">
72+
<h2 className="text-6xl md:text-8xl font-bold mb-4 text-alien-gold text-glow font-nasalization tracking-wider">
73+
₿£€$$
74+
</h2>
75+
<div className="absolute -inset-4 bg-gradient-to-r from-alien-gold/20 to-alien-green/20 blur-xl rounded-full" />
76+
</div>
77+
78+
<motion.h3
79+
initial={{ opacity: 0, scale: 0.9 }}
80+
whileInView={{ opacity: 1, scale: 1 }}
81+
transition={{ duration: 0.8, delay: 0.2 }}
82+
viewport={{ once: true }}
83+
className="text-4xl md:text-5xl font-bold mb-8 text-alien-gold text-glow font-nasalization"
84+
>
3885
Financial Freedom
39-
</h3>
86+
</motion.h3>
87+
</motion.div>
4088

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" />
45-
</div>
89+
{/* Main Content Grid */}
90+
<div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
91+
{/* Left: Main Description */}
92+
<motion.div
93+
initial={{ opacity: 0, x: -50 }}
94+
whileInView={{ opacity: 1, x: 0 }}
95+
transition={{ duration: 0.8, delay: 0.3 }}
96+
viewport={{ once: true }}
97+
className="space-y-6"
98+
>
99+
<div className="card-border p-8 backdrop-blur-md">
100+
<h4 className="text-2xl font-bold text-alien-green mb-4 font-nasalization">
101+
Digital Money Advantage
102+
</h4>
103+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed mb-6">
104+
Any Individual or Professional can Understand the Advantage of Digital Money:
105+
</p>
106+
107+
<div className="space-y-4 text-gray-300 font-[Exo]">
108+
<p className="leading-relaxed">
109+
<span className="text-alien-gold font-semibold">Impartial Money</span> that does not discriminate,
110+
<span className="text-alien-green font-semibold"> Decentralized Currencies</span>,
111+
Scalable and Stable with the Volatility for Safe Reserves of Values.
112+
</p>
113+
<p className="leading-relaxed">
114+
Allowing individuals to <span className="text-alien-gold font-semibold">secure their wealth</span> while
115+
enjoying the benefits of a <span className="text-alien-green font-semibold">decentralized economy</span>.
116+
</p>
117+
<p className="leading-relaxed">
118+
Access with <span className="text-alien-gold font-semibold">Cryptokens and NFTs</span> to Order & Generate
119+
All Types of Experiences, Products & Services According to your Demands
120+
<span className="text-alien-green font-semibold"> Instantly</span>...
121+
</p>
122+
</div>
123+
</div>
124+
</motion.div>
46125

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>
58-
</motion.div>
126+
{/* Right: Benefits Grid */}
127+
<motion.div
128+
initial={{ opacity: 0, x: 50 }}
129+
whileInView={{ opacity: 1, x: 0 }}
130+
transition={{ duration: 0.8, delay: 0.4 }}
131+
viewport={{ once: true }}
132+
className="grid grid-cols-2 gap-4"
133+
>
134+
{benefits.map((benefit, index) => (
135+
<motion.div
136+
key={index}
137+
initial={{ opacity: 0, y: 20 }}
138+
whileInView={{ opacity: 1, y: 0 }}
139+
transition={{ duration: 0.5, delay: 0.1 * index }}
140+
viewport={{ once: true }}
141+
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
142+
>
143+
<benefit.icon className="h-8 w-8 text-alien-gold mx-auto mb-2" />
144+
<h5 className="font-bold text-sm text-alien-green font-nasalization mb-1">
145+
{benefit.title}
146+
</h5>
147+
<p className="text-xs text-gray-400 font-[Exo]">
148+
{benefit.description}
149+
</p>
150+
</motion.div>
151+
))}
152+
</motion.div>
153+
</div>
59154

60-
{/* ABTC Token Highlight */}
155+
{/* ABTC Token Highlight - Enhanced */}
61156
<motion.div
62157
initial={{ opacity: 0, scale: 0.9 }}
63158
whileInView={{ opacity: 1, scale: 1 }}
64-
transition={{ duration: 0.8, delay: 0.3 }}
159+
transition={{ duration: 0.8, delay: 0.5 }}
65160
viewport={{ once: true }}
66-
className="card-border p-6 max-w-4xl mx-auto text-center mb-8"
161+
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden"
67162
>
68-
<h3 className="text-2xl font-bold mb-3 text-alien-gold font-nasalization">
69-
A₿tc (Aurum nostrum non est aurum vulgi)
70-
</h3>
71-
<p className="text-gray-300 mb-4 font-[Exo]">
72-
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold, providing scalability, stability and growth potential (Φπ)...
73-
</p>
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">
75-
• Bitcoin-backed + Interoperable
76-
</div>
163+
{/* Background decorative elements */}
164+
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 via-transparent to-alien-green/5" />
165+
<div className="absolute top-0 left-0 w-32 h-32 bg-alien-gold/10 rounded-full blur-3xl" />
166+
<div className="absolute bottom-0 right-0 w-32 h-32 bg-alien-green/10 rounded-full blur-3xl" />
77167

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>
168+
<div className="relative z-10">
169+
<motion.h3
170+
initial={{ opacity: 0, y: 20 }}
171+
whileInView={{ opacity: 1, y: 0 }}
172+
transition={{ duration: 0.6, delay: 0.6 }}
173+
viewport={{ once: true }}
174+
className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization"
175+
>
176+
A₿tc <span className="text-sm text-gray-400">(Aurum nostrum non est aurum vulgi)</span>
177+
</h3>
178+
179+
<motion.p
180+
initial={{ opacity: 0, y: 20 }}
181+
whileInView={{ opacity: 1, y: 0 }}
182+
transition={{ duration: 0.6, delay: 0.7 }}
183+
viewport={{ once: true }}
184+
className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto"
185+
>
186+
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold,
187+
providing <span className="text-alien-green font-semibold">scalability</span>,
188+
<span className="text-alien-gold font-semibold"> stability</span> and
189+
<span className="text-alien-green font-semibold"> growth potential (Φπ)</span>...
190+
</motion.p>
191+
192+
<motion.div
193+
initial={{ opacity: 0, scale: 0.9 }}
194+
whileInView={{ opacity: 1, scale: 1 }}
195+
transition={{ duration: 0.6, delay: 0.8 }}
196+
viewport={{ once: true }}
197+
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"
198+
>
199+
<Bitcoin className="h-5 w-5 text-alien-gold" />
200+
<span className="text-alien-green font-semibold font-[Exo]">Bitcoin-backed</span>
201+
<span className="text-gray-400">•</span>
202+
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
203+
</motion.div>
204+
205+
{/* CoinMarketCap Widget */}
206+
<motion.div
207+
initial={{ opacity: 0, y: 20 }}
208+
whileInView={{ opacity: 1, y: 0 }}
209+
transition={{ duration: 0.6, delay: 0.9 }}
210+
viewport={{ once: true }}
211+
className="flex justify-center"
212+
>
213+
<div
214+
className="coinmarketcap-currency-widget bg-alien-space-dark/50 p-4 rounded-lg border border-alien-gold/20"
215+
data-currencyid="1"
216+
data-base="USD"
217+
data-secondary="BTC"
218+
data-ticker="true"
219+
data-rank="true"
220+
data-marketcap="true"
221+
data-volume="true"
222+
data-statsticker="true"
223+
data-stats="USD"
224+
></div>
225+
</motion.div>
92226
</div>
93227
</motion.div>
94228
</div>

0 commit comments

Comments
 (0)