Skip to content

Commit 7965fcd

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor: Improve Financial Freedom section
- Updated the "Financial Freedom" section in `src/components/FinancialFreedomSection.tsx` to include the TradingView widget for Bitcoin dominance, alongside the CoinMarketCap widget. - Adjusted the layout and design for better balance and visual harmony. - Modified the content to align with the new title and design.
1 parent b9b3f21 commit 7965fcd

File tree

1 file changed

+124
-91
lines changed

1 file changed

+124
-91
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 124 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,21 @@ const FinancialFreedomSection = () => {
1313
script.async = true;
1414
document.head.appendChild(script);
1515

16+
// Load TradingView widget script
17+
const tradingViewScript = document.createElement('script');
18+
tradingViewScript.type = 'text/javascript';
19+
tradingViewScript.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js';
20+
tradingViewScript.async = true;
21+
document.head.appendChild(tradingViewScript);
22+
1623
return () => {
17-
// Cleanup script on unmount
24+
// Cleanup scripts on unmount
1825
if (document.head.contains(script)) {
1926
document.head.removeChild(script);
2027
}
28+
if (document.head.contains(tradingViewScript)) {
29+
document.head.removeChild(tradingViewScript);
30+
}
2131
};
2232
}, []);
2333

@@ -50,102 +60,100 @@ const FinancialFreedomSection = () => {
5060
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
5161

5262
<div className="container mx-auto px-4 relative z-10">
53-
{/* Header Section */}
63+
{/* Header Section - Centered and Balanced */}
5464
<motion.div
5565
initial={{ opacity: 0, y: 30 }}
5666
whileInView={{ opacity: 1, y: 0 }}
5767
transition={{ duration: 0.8 }}
5868
viewport={{ once: true }}
5969
className="text-center mb-16"
6070
>
61-
<div className="inline-block relative">
62-
<h2 className="text-6xl md:text-8xl font-bold mb-4 text-alien-gold text-glow font-nasalization tracking-wider">
63-
₿£€$$
71+
<div className="inline-block relative mb-8">
72+
<h2 className="text-5xl md:text-7xl font-bold mb-4 text-alien-gold text-glow font-nasalization tracking-wider">
73+
₿£€$$ <span className="text-3xl md:text-4xl text-alien-green">for the Free Earth</span>
6474
</h2>
6575
<div className="absolute -inset-4 bg-gradient-to-r from-alien-gold/20 to-alien-green/20 blur-xl rounded-full" />
6676
</div>
67-
68-
<motion.h3
69-
initial={{ opacity: 0, scale: 0.9 }}
70-
whileInView={{ opacity: 1, scale: 1 }}
71-
transition={{ duration: 0.8, delay: 0.2 }}
72-
viewport={{ once: true }}
73-
className="text-4xl md:text-5xl font-bold mb-8 text-alien-gold text-glow font-nasalization"
74-
>
75-
Financial Freedom
76-
</motion.h3>
7777
</motion.div>
7878

79-
{/* Main Content Grid */}
80-
<div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
81-
{/* Left: Main Description */}
79+
{/* Main Content - Centered Layout */}
80+
<div className="max-w-4xl mx-auto mb-16">
8281
<motion.div
83-
initial={{ opacity: 0, x: -50 }}
84-
whileInView={{ opacity: 1, x: 0 }}
82+
initial={{ opacity: 0, y: 30 }}
83+
whileInView={{ opacity: 1, y: 0 }}
8584
transition={{ duration: 0.8, delay: 0.3 }}
8685
viewport={{ once: true }}
87-
className="space-y-6"
86+
className="card-border p-8 backdrop-blur-md text-center"
8887
>
89-
<div className="card-border p-8 backdrop-blur-md">
90-
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed mb-6">
91-
Any Individual or Professional can Understand the Advantage of Digital Money:
92-
</p>
93-
94-
<div className="space-y-4 text-gray-300 font-[Exo]">
95-
<p className="leading-relaxed">
96-
<span className="text-alien-gold font-semibold">Impartial Money</span> that does not discriminate,
97-
<span className="text-alien-green font-semibold"> Decentralized Currencies</span>,
98-
Scalable and Stable with the Volatility for Safe Reserves of Values.
99-
</p>
100-
<p className="leading-relaxed">
101-
Allowing individuals to <span className="text-alien-gold font-semibold">secure their wealth</span> while
102-
enjoying the benefits of a <span className="text-alien-green font-semibold">decentralized economy</span>.
88+
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8">
89+
Any individual or professional can understand the advantage of digital Money:
90+
</p>
91+
92+
<div className="space-y-6 text-left max-w-3xl mx-auto">
93+
<div className="flex items-start gap-4">
94+
<span className="text-alien-gold text-xl">·</span>
95+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
96+
<span className="text-alien-gold font-semibold">Impartial Money:</span> that does not discriminate.
10397
</p>
104-
<p className="leading-relaxed">
105-
Access with <span className="text-alien-gold font-semibold">Cryptokens and NFTs</span> to Order & Generate
106-
All Types of Experiences, Products & Services According to your Demands
107-
<span className="text-alien-green font-semibold"> Instantly</span>...
98+
</div>
99+
100+
<div className="flex items-start gap-4">
101+
<span className="text-alien-gold text-xl">·</span>
102+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
103+
<span className="text-alien-green font-semibold">Decentralized Currencies:</span> Scalable and Stable with the Volatility for Safe Reserves of Values.
108104
</p>
109105
</div>
110106
</div>
111-
</motion.div>
112-
113-
{/* Right: Benefits Grid */}
114-
<motion.div
115-
initial={{ opacity: 0, x: 50 }}
116-
whileInView={{ opacity: 1, x: 0 }}
117-
transition={{ duration: 0.8, delay: 0.4 }}
118-
viewport={{ once: true }}
119-
className="grid grid-cols-2 gap-4"
120-
>
121-
{benefits.map((benefit, index) => (
122-
<motion.div
123-
key={index}
124-
initial={{ opacity: 0, y: 20 }}
125-
whileInView={{ opacity: 1, y: 0 }}
126-
transition={{ duration: 0.5, delay: 0.1 * index }}
127-
viewport={{ once: true }}
128-
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
129-
>
130-
<benefit.icon className="h-8 w-8 text-alien-gold mx-auto mb-2" />
131-
<h5 className="font-bold text-sm text-alien-green font-nasalization mb-1">
132-
{benefit.title}
133-
</h5>
134-
<p className="text-xs text-gray-400 font-[Exo]">
135-
{benefit.description}
136-
</p>
137-
</motion.div>
138-
))}
107+
108+
<div className="mt-8 space-y-4 text-center">
109+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
110+
Allowing individuals to <span className="text-alien-gold font-semibold">secure their wealth</span> while
111+
enjoying the benefits of a <span className="text-alien-green font-semibold">decentralized economy</span>.
112+
</p>
113+
<p className="text-lg text-gray-300 font-[Exo] leading-relaxed">
114+
Access with <span className="text-alien-gold font-semibold">Cryptokens and NFTs</span> to Order & Generate
115+
All Types of Experiences, Products & Services According to your Demands
116+
<span className="text-alien-green font-semibold"> Instantly</span>...
117+
</p>
118+
</div>
139119
</motion.div>
140120
</div>
141121

142-
{/* ABTC Token Highlight - Enhanced */}
122+
{/* Benefits Grid - Smaller and Complementary */}
123+
<motion.div
124+
initial={{ opacity: 0, y: 30 }}
125+
whileInView={{ opacity: 1, y: 0 }}
126+
transition={{ duration: 0.8, delay: 0.4 }}
127+
viewport={{ once: true }}
128+
className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto"
129+
>
130+
{benefits.map((benefit, index) => (
131+
<motion.div
132+
key={index}
133+
initial={{ opacity: 0, y: 20 }}
134+
whileInView={{ opacity: 1, y: 0 }}
135+
transition={{ duration: 0.5, delay: 0.1 * index }}
136+
viewport={{ once: true }}
137+
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
138+
>
139+
<benefit.icon className="h-6 w-6 text-alien-gold mx-auto mb-2" />
140+
<h5 className="font-bold text-xs text-alien-green font-nasalization mb-1">
141+
{benefit.title}
142+
</h5>
143+
<p className="text-xs text-gray-400 font-[Exo]">
144+
{benefit.description}
145+
</p>
146+
</motion.div>
147+
))}
148+
</motion.div>
149+
150+
{/* ABTC Token Highlight */}
143151
<motion.div
144152
initial={{ opacity: 0, scale: 0.9 }}
145153
whileInView={{ opacity: 1, scale: 1 }}
146154
transition={{ duration: 0.8, delay: 0.5 }}
147155
viewport={{ once: true }}
148-
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden"
156+
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden mb-12"
149157
>
150158
{/* Background decorative elements */}
151159
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 via-transparent to-alien-green/5" />
@@ -188,28 +196,53 @@ const FinancialFreedomSection = () => {
188196
<span className="text-gray-400">•</span>
189197
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
190198
</motion.div>
191-
192-
{/* CoinMarketCap Widget */}
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="flex justify-center"
199-
>
200-
<div
201-
className="coinmarketcap-currency-widget bg-alien-space-dark/50 p-4 rounded-lg border border-alien-gold/20"
202-
data-currencyid="1"
203-
data-base="USD"
204-
data-secondary="BTC"
205-
data-ticker="true"
206-
data-rank="true"
207-
data-marketcap="true"
208-
data-volume="true"
209-
data-statsticker="true"
210-
data-stats="USD"
211-
></div>
212-
</motion.div>
199+
</div>
200+
</motion.div>
201+
202+
{/* Widgets Section - Side by Side */}
203+
<motion.div
204+
initial={{ opacity: 0, y: 20 }}
205+
whileInView={{ opacity: 1, y: 0 }}
206+
transition={{ duration: 0.6, delay: 0.9 }}
207+
viewport={{ once: true }}
208+
className="grid md:grid-cols-2 gap-6 max-w-6xl mx-auto"
209+
>
210+
{/* CoinMarketCap Widget */}
211+
<div className="card-border p-4 text-center">
212+
<h4 className="text-lg font-bold text-alien-gold font-nasalization mb-4">Bitcoin Price</h4>
213+
<div
214+
className="coinmarketcap-currency-widget bg-alien-space-dark/50 rounded-lg"
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+
</div>
226+
227+
{/* TradingView Bitcoin Dominance Widget */}
228+
<div className="card-border p-4 text-center">
229+
<h4 className="text-lg font-bold text-alien-green font-nasalization mb-4">Bitcoin Dominance</h4>
230+
<div className="tradingview-widget-container bg-alien-space-dark/50 rounded-lg overflow-hidden">
231+
<div className="tradingview-widget-container__widget"></div>
232+
<script type="text/javascript" async>
233+
{`
234+
new TradingView.widget({
235+
"symbol": "CRYPTOCAP:BTC.D",
236+
"width": "100%",
237+
"height": "200",
238+
"locale": "en",
239+
"colorTheme": "dark",
240+
"isTransparent": true,
241+
"container_id": "tradingview_widget"
242+
});
243+
`}
244+
</script>
245+
</div>
213246
</div>
214247
</motion.div>
215248
</div>

0 commit comments

Comments
 (0)