Visual edit in Lovable
Edited UI in Lovable
gpt-engineer-app[bot] committed
Nov 27, 2025 at 13:52 UTC
09eb006b9266624655781415a778bad257483dd8
2 files changed
+28
-45
src/components/landing/Features.tsx
+25
-41
@@ -1,48 +1,35 @@
1
import { Globe, Zap, Shield, CreditCard } from "lucide-react";
2
-
3
-const features = [
4
- {
5
- icon: Globe,
6
- title: "Send money abroad",
7
- description: "Send money to 80+ countries with the real exchange rate. No hidden fees, ever.",
8
- },
9
- {
10
- icon: Zap,
11
- title: "Lightning fast",
12
- description: "Most transfers arrive in seconds. Track your money every step of the way.",
13
- },
14
- {
15
- icon: Shield,
16
- title: "Safe and secure",
17
- description: "We're regulated by the world's most respected authorities. Your money is always protected.",
18
- },
19
- {
20
- icon: CreditCard,
21
- title: "Wise Card",
22
- description: "Spend abroad with the real exchange rate. Works everywhere Mastercard is accepted.",
23
- },
24
-];
25
-
2
+const features = [{
3
+ icon: Globe,
4
+ title: "Send money abroad",
5
+ description: "Send money to 80+ countries with the real exchange rate. No hidden fees, ever."
6
+}, {
7
+ icon: Zap,
8
+ title: "Lightning fast",
9
+ description: "Most transfers arrive in seconds. Track your money every step of the way."
10
+}, {
11
+ icon: Shield,
12
+ title: "Safe and secure",
13
+ description: "We're regulated by the world's most respected authorities. Your money is always protected."
14
+}, {
15
+ icon: CreditCard,
16
+ title: "Wise Card",
17
+ description: "Spend abroad with the real exchange rate. Works everywhere Mastercard is accepted."
18
+}];
19
const Features = () => {
27
- return (
28
- <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">
31
- <h2 className="text-3xl md:text-5xl font-bold text-foreground">
32
- Why people choose Wise
33
- </h2>
23
+ <h2 className="text-3xl md:text-5xl font-bold text-foreground">Why Blockchain?</h2>
24
<p className="mt-4 text-lg text-muted-foreground">
25
We're building the best way to move and manage your money around the world.
26
</p>
27
</div>
28
29
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
40
- {features.map((feature, index) => (
41
- <div
42
- key={index}
43
- className="group p-6 rounded-2xl bg-muted hover:bg-primary/10 transition-all duration-300 animate-fade-up"
44
- style={{ animationDelay: `${index * 100}ms` }}
45
- >
30
+ {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={{
31
+ animationDelay: `${index * 100}ms`
32
+ }}>
33
<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">
34
<feature.icon className="w-7 h-7 text-primary group-hover:text-primary-foreground transition-colors" />
35
</div>
@@ -52,12 +39,9 @@ const Features = () => {
39
<p className="text-muted-foreground">
40
{feature.description}
41
</p>
55
- </div>
56
- ))}
42
+ </div>)}
43
</div>
44
</div>
59
- </section>
60
- );
45
+ </section>;
46
};
62
-
63
-export default Features;
47
+export default Features;
\ No newline at end of file
src/components/landing/Header.tsx
+3
-4
@@ -8,7 +8,8 @@ const Header = () => {
8
{/* Logo */}
9
<a href="/" className="flex items-center gap-2">
10
<div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
11
- <span className="text-primary-foreground font-bold text-lg">€</span>
11
+ <span className="text-primary-foreground font-bold text-lg">
12
+ </span>
13
</div>
14
<span className="text-xl font-bold text-foreground">Snac</span>
15
</a>
@@ -17,9 +18,7 @@ const Header = () => {
18
<nav className="hidden md:flex items-center gap-8">
19
<a href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Company Purchases</a>
20
<a href="#how-it-works" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Cross-Border </a>
20
- <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
21
- Help
22
- </a>
21
+ <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Spend Overview</a>
22
</nav>
23
24
{/* Desktop CTA */}