Visual edit in Lovable
Edited UI in Lovable
gpt-engineer-app[bot] committed
Nov 27, 2025 at 15:12 UTC
e18fdf37f8dde37b1cf102a17f8029d502221e81
1 file changed
+26
-42
src/components/landing/HowItWorks.tsx
+26
-42
@@ -1,32 +1,24 @@
1
import { ArrowRight } from "lucide-react";
2
import { Button } from "@/components/ui/button";
3
-
4
-const steps = [
5
- {
6
- number: "01",
7
- title: "Sign up for free",
8
- description: "Create your account in minutes. All you need is your email address to get started.",
9
- },
10
- {
11
- number: "02",
12
- title: "Choose your amount",
13
- description: "Tell us how much you want to send and where. We'll show you our fee upfront—no surprises.",
14
- },
15
- {
16
- number: "03",
17
- title: "Add recipient details",
18
- description: "Enter your recipient's bank details. We'll make sure everything is correct.",
19
- },
20
- {
21
- number: "04",
22
- title: "Send money",
23
- description: "Pay for your transfer and we'll do the rest. Track your money in real time.",
24
- },
25
-];
26
-
3
+const steps = [{
4
+ number: "01",
5
+ title: "Sign up for free",
6
+ description: "Create your account in minutes. All you need is your email address to get started."
7
+}, {
8
+ number: "02",
9
+ title: "Choose your amount",
10
+ description: "Tell us how much you want to send and where. We'll show you our fee upfront—no surprises."
11
+}, {
12
+ number: "03",
13
+ title: "Add recipient details",
14
+ description: "Enter your recipient's bank details. We'll make sure everything is correct."
15
+}, {
16
+ number: "04",
17
+ title: "Send money",
18
+ description: "Pay for your transfer and we'll do the rest. Track your money in real time."
19
+}];
20
const HowItWorks = () => {
28
- return (
29
- <section id="how-it-works" className="py-20 md:py-32 bg-secondary text-secondary-foreground">
21
+ return <section id="how-it-works" className="py-20 md:py-32 bg-secondary text-secondary-foreground">
22
<div className="container">
23
<div className="max-w-2xl mb-16">
24
<h2 className="text-3xl md:text-5xl font-bold">
@@ -38,24 +30,18 @@ const HowItWorks = () => {
30
</div>
31
32
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
41
- {steps.map((step, index) => (
42
- <div
43
- key={index}
44
- className="relative animate-fade-up"
45
- style={{ animationDelay: `${index * 100}ms` }}
46
- >
33
+ {steps.map((step, index) => <div key={index} className="relative animate-fade-up" style={{
34
+ animationDelay: `${index * 100}ms`
35
+ }}>
36
{/* Connector line */}
48
- {index < steps.length - 1 && (
49
- <div className="hidden lg:block absolute top-8 left-full w-full h-0.5 bg-primary/30" />
50
- )}
37
+ {index < steps.length - 1 && <div className="hidden lg:block absolute top-8 left-full w-full h-0.5 bg-primary/30" />}
38
39
<div className="mb-4">
53
- <span className="text-6xl font-bold text-primary/30">{step.number}</span>
40
+ <span className="text-6xl font-bold text-lime-400">{step.number}</span>
41
</div>
42
<h3 className="text-xl font-semibold mb-2">{step.title}</h3>
43
<p className="text-secondary-foreground/70">{step.description}</p>
57
- </div>
58
- ))}
44
+ </div>)}
45
</div>
46
47
<div className="mt-16 text-center">
@@ -65,8 +51,6 @@ const HowItWorks = () => {
51
</Button>
52
</div>
53
</div>
68
- </section>
69
- );
54
+ </section>;
55
};
71
-
72
-export default HowItWorks;
56
+export default HowItWorks;
\ No newline at end of file