Skip to content

Commit 89b6bcd

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Visual edit in Lovable
Edited UI in Lovable
1 parent 5d6c685 commit 89b6bcd

File tree

1 file changed

+100
-70
lines changed

1 file changed

+100
-70
lines changed

‎src/components/FinancialFreedomSection.tsx‎

Lines changed: 100 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
21
import React from 'react';
32
import { motion } from 'framer-motion';
43
import { Bitcoin, TrendingUp, Shield, Coins, Zap } from 'lucide-react';
5-
64
const FinancialFreedomSection = () => {
75
const benefits = [{
86
icon: TrendingUp,
@@ -21,21 +19,23 @@ const FinancialFreedomSection = () => {
2119
title: "Digital Assets",
2220
description: "NFTs & tokens"
2321
}];
24-
25-
return (
26-
<section className="py-20 relative overflow-hidden">
22+
return <section className="py-20 relative overflow-hidden">
2723
{/* Background gradient effect */}
2824
<div className="absolute inset-0 bg-gradient-radial from-alien-green/5 via-transparent to-transparent" />
2925

3026
<div className="container mx-auto px-4 relative z-10">
3127
{/* Header Section - Two Line Title */}
32-
<motion.div
33-
initial={{ opacity: 0, y: 30 }}
34-
whileInView={{ opacity: 1, y: 0 }}
35-
transition={{ duration: 0.8 }}
36-
viewport={{ once: true }}
37-
className="text-center mb-16"
38-
>
28+
<motion.div initial={{
29+
opacity: 0,
30+
y: 30
31+
}} whileInView={{
32+
opacity: 1,
33+
y: 0
34+
}} transition={{
35+
duration: 0.8
36+
}} viewport={{
37+
once: true
38+
}} className="text-center mb-16">
3939
<div className="space-y-4">
4040
<h2 className="text-5xl md:text-6xl text-alien-gold font-nasalization tracking-wider font-bold">
4141
₿£€$$
@@ -48,13 +48,18 @@ const FinancialFreedomSection = () => {
4848

4949
{/* Main Content - Centered Layout */}
5050
<div className="max-w-4xl mx-auto mb-16">
51-
<motion.div
52-
initial={{ opacity: 0, y: 30 }}
53-
whileInView={{ opacity: 1, y: 0 }}
54-
transition={{ duration: 0.8, delay: 0.3 }}
55-
viewport={{ once: true }}
56-
className="card-border p-8 backdrop-blur-md text-center"
57-
>
51+
<motion.div initial={{
52+
opacity: 0,
53+
y: 30
54+
}} whileInView={{
55+
opacity: 1,
56+
y: 0
57+
}} transition={{
58+
duration: 0.8,
59+
delay: 0.3
60+
}} viewport={{
61+
once: true
62+
}} className="card-border p-8 backdrop-blur-md text-center">
5863
<p className="text-xl text-gray-300 font-[Exo] leading-relaxed mb-8 text-center">
5964
Any individual or professional can understand the advantage of digital Money:
6065
</p>
@@ -88,87 +93,112 @@ const FinancialFreedomSection = () => {
8893
</div>
8994

9095
{/* Benefits Grid - Smaller and Complementary */}
91-
<motion.div
92-
initial={{ opacity: 0, y: 30 }}
93-
whileInView={{ opacity: 1, y: 0 }}
94-
transition={{ duration: 0.8, delay: 0.4 }}
95-
viewport={{ once: true }}
96-
className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto"
97-
>
98-
{benefits.map((benefit, index) => (
99-
<motion.div
100-
key={index}
101-
initial={{ opacity: 0, y: 20 }}
102-
whileInView={{ opacity: 1, y: 0 }}
103-
transition={{ duration: 0.5, delay: 0.1 * index }}
104-
viewport={{ once: true }}
105-
className="card-border p-4 text-center hover:scale-105 transition-transform duration-300"
106-
>
96+
<motion.div initial={{
97+
opacity: 0,
98+
y: 30
99+
}} whileInView={{
100+
opacity: 1,
101+
y: 0
102+
}} transition={{
103+
duration: 0.8,
104+
delay: 0.4
105+
}} viewport={{
106+
once: true
107+
}} className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16 max-w-4xl mx-auto">
108+
{benefits.map((benefit, index) => <motion.div key={index} initial={{
109+
opacity: 0,
110+
y: 20
111+
}} whileInView={{
112+
opacity: 1,
113+
y: 0
114+
}} transition={{
115+
duration: 0.5,
116+
delay: 0.1 * index
117+
}} viewport={{
118+
once: true
119+
}} className="card-border p-4 text-center hover:scale-105 transition-transform duration-300">
107120
<benefit.icon className="h-6 w-6 text-alien-gold mx-auto mb-2" />
108121
<h5 className="font-bold text-xs text-alien-green font-nasalization mb-1">
109122
{benefit.title}
110123
</h5>
111124
<p className="text-xs text-gray-400 font-[Exo]">
112125
{benefit.description}
113126
</p>
114-
</motion.div>
115-
))}
127+
</motion.div>)}
116128
</motion.div>
117129

118130
{/* ABTC Token Highlight - Simplified without widget */}
119-
<motion.div
120-
initial={{ opacity: 0, scale: 0.9 }}
121-
whileInView={{ opacity: 1, scale: 1 }}
122-
transition={{ duration: 0.8, delay: 0.5 }}
123-
viewport={{ once: true }}
124-
className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden"
125-
>
131+
<motion.div initial={{
132+
opacity: 0,
133+
scale: 0.9
134+
}} whileInView={{
135+
opacity: 1,
136+
scale: 1
137+
}} transition={{
138+
duration: 0.8,
139+
delay: 0.5
140+
}} viewport={{
141+
once: true
142+
}} className="card-border p-8 max-w-6xl mx-auto text-center relative overflow-hidden">
126143
{/* Background decorative elements */}
127144
<div className="absolute inset-0 bg-gradient-to-br from-alien-gold/5 via-transparent to-alien-green/5" />
128145
<div className="absolute top-0 left-0 w-32 h-32 bg-alien-gold/10 rounded-full blur-3xl" />
129146
<div className="absolute bottom-0 right-0 w-32 h-32 bg-alien-green/10 rounded-full blur-3xl" />
130147

131148
<div className="relative z-10">
132-
<motion.h3
133-
initial={{ opacity: 0, y: 20 }}
134-
whileInView={{ opacity: 1, y: 0 }}
135-
transition={{ duration: 0.6, delay: 0.6 }}
136-
viewport={{ once: true }}
137-
className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization"
138-
>
149+
<motion.h3 initial={{
150+
opacity: 0,
151+
y: 20
152+
}} whileInView={{
153+
opacity: 1,
154+
y: 0
155+
}} transition={{
156+
duration: 0.6,
157+
delay: 0.6
158+
}} viewport={{
159+
once: true
160+
}} className="text-3xl md:text-4xl font-bold mb-4 text-alien-gold font-nasalization">
139161
A₿tc <span className="text-sm text-[#03ff19]">(Aurum nostrum non est aurum vulgi)</span>
140162
</motion.h3>
141163

142-
<motion.p
143-
initial={{ opacity: 0, y: 20 }}
144-
whileInView={{ opacity: 1, y: 0 }}
145-
transition={{ duration: 0.6, delay: 0.7 }}
146-
viewport={{ once: true }}
147-
className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto"
148-
>
164+
<motion.p initial={{
165+
opacity: 0,
166+
y: 20
167+
}} whileInView={{
168+
opacity: 1,
169+
y: 0
170+
}} transition={{
171+
duration: 0.6,
172+
delay: 0.7
173+
}} viewport={{
174+
once: true
175+
}} className="text-lg text-gray-300 mb-6 font-[Exo] max-w-3xl mx-auto">
149176
Aurum ₿itoin cryptoken serves as collateral and derivative of Bitcoin and gold,
150177
providing <span className="text-alien-green font-semibold">scalability</span>,
151178
<span className="text-alien-gold font-semibold"> stability</span> and
152179
<span className="text-alien-green font-semibold"> growth potential (Φπ)</span>...
153180
</motion.p>
154181

155-
<motion.div
156-
initial={{ opacity: 0, scale: 0.9 }}
157-
whileInView={{ opacity: 1, scale: 1 }}
158-
transition={{ duration: 0.6, delay: 0.8 }}
159-
viewport={{ once: true }}
160-
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"
161-
>
182+
<motion.div initial={{
183+
opacity: 0,
184+
scale: 0.9
185+
}} whileInView={{
186+
opacity: 1,
187+
scale: 1
188+
}} transition={{
189+
duration: 0.6,
190+
delay: 0.8
191+
}} viewport={{
192+
once: true
193+
}} 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">
162194
<Bitcoin className="h-5 w-5 text-alien-gold" />
163-
<span className="text-alien-green font-semibold font-[Exo]">Bitcoin-backed</span>
195+
<span className="text-alien-green font-semibold font-[Exo]">₿itcoin backed</span>
164196
<span className="text-gray-400">•</span>
165197
<span className="text-alien-gold font-semibold font-[Exo]">Interoperable</span>
166198
</motion.div>
167199
</div>
168200
</motion.div>
169201
</div>
170-
</section>
171-
);
202+
</section>;
172203
};
173-
174-
export default FinancialFreedomSection;
204+
export default FinancialFreedomSection;

0 commit comments

Comments
 (0)