Visual edit in Lovable
Edited UI in Lovable
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:34 UTC
81c632d968a2c43a52db40fa525f4cbf80d37734
1 file changed
+25
-38
src/components/landing/Features.tsx
+25
-38
@@ -1,54 +1,41 @@
1
import { Globe, Zap, Shield, CreditCard } from "lucide-react";
2
-const features = [
3
- {
4
- icon: Globe,
5
- title: "Global Settlement Layer",
6
- description: "Send money to 80+ countries with the real exchange rate. No hidden fees, ever.",
7
- },
8
- {
9
- icon: Zap,
10
- title: "Low-Cost Cross-Border Transactions",
11
- description: "Most transfers arrive in seconds. Track your money every step of the way.",
12
- },
13
- {
14
- icon: Shield,
15
- title: "Faster knowledge of Internal Spending",
16
- description: "We're regulated by the world's most respected authorities. Your money is always protected.",
17
- },
18
- {
19
- icon: CreditCard,
20
- title: "AI Agent Ready",
21
- description: "Spend abroad with the real exchange rate. Works everywhere Mastercard is accepted.",
22
- },
23
-];
2
+const features = [{
3
+ icon: Globe,
4
+ title: "Global Settlement Layer",
5
+ description: "Send money to 80+ countries with the real exchange rate. No hidden fees, ever."
6
+}, {
7
+ icon: Zap,
8
+ title: "Low-Cost Cross-Border Transactions",
9
+ description: "Most transfers arrive in seconds. Track your money every step of the way."
10
+}, {
11
+ icon: Shield,
12
+ title: "Faster knowledge of Internal Spending",
13
+ description: "We're regulated by the world's most respected authorities. Your money is always protected."
14
+}, {
15
+ icon: CreditCard,
16
+ title: "AI Agent Ready",
17
+ description: "Spend abroad with the real exchange rate. Works everywhere Mastercard is accepted."
18
+}];
19
const Features = () => {
25
- return (
26
- <section id="features" className="py-20 md:py-32 bg-background">
20
+ return <section id="features" className="py-20 md:py-32 bg-background">
21
<div className="container">
22
<div className="text-center max-w-2xl mx-auto mb-16">
29
- <h2 className="text-3xl md:text-5xl font-bold text-foreground">Why Blockchain?</h2>
23
+ <h2 className="text-3xl md:text-5xl font-bold text-foreground">Why Blockchain Expense Management?</h2>
24
<p className="mt-4 text-lg text-muted-foreground">Of course there are other ways to do Expense Management </p>
25
</div>
26
27
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
34
- {features.map((feature, index) => (
35
- <div
36
- key={index}
37
- className="group p-6 rounded-2xl bg-muted hover:bg-primary/10 transition-all duration-300 animate-fade-up"
38
- style={{
39
- animationDelay: `${index * 100}ms`,
40
- }}
41
- >
28
+ {features.map((feature, index) => <div key={index} className="group p-6 rounded-2xl bg-muted hover:bg-primary/10 transition-all duration-300 animate-fade-up" style={{
29
+ animationDelay: `${index * 100}ms`
30
+ }}>
31
<div className="w-14 h-14 rounded-2xl bg-primary/20 flex items-center justify-center mb-6 group-hover:bg-primary group-hover:scale-110 transition-all duration-300">
32
<feature.icon className="w-7 h-7 text-primary group-hover:text-primary-foreground transition-colors" />
33
</div>
34
<h3 className="text-xl font-semibold text-foreground mb-2">{feature.title}</h3>
35
<p className="text-muted-foreground">{feature.description}</p>
47
- </div>
48
- ))}
36
+ </div>)}
37
</div>
38
</div>
51
- </section>
52
- );
39
+ </section>;
40
};
54
-export default Features;
41
+export default Features;
\ No newline at end of file