Visual edit in Lovable
Edited UI in Lovable
gpt-engineer-app[bot] committed
Nov 27, 2025 at 13:25 UTC
425f64b55658ba26d9ae0aaa1e2d3912eda831a3
2 files changed
+13
-32
src/components/landing/Header.tsx
+8
-19
@@ -1,19 +1,16 @@
1
import { Button } from "@/components/ui/button";
2
import { Menu, X } from "lucide-react";
3
import { useState } from "react";
4
-
4
const Header = () => {
5
const [isMenuOpen, setIsMenuOpen] = useState(false);
7
-
8
- return (
9
- <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
6
+ return <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
7
<div className="container flex items-center justify-between h-16 md:h-20">
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">
14
- <span className="text-primary-foreground font-bold text-lg">W</span>
11
+ <span className="text-primary-foreground font-bold text-lg">€</span>
12
</div>
16
- <span className="text-xl font-bold text-foreground">wise</span>
13
+ <span className="text-xl font-bold text-foreground">Snac</span>
14
</a>
15
16
{/* Desktop Navigation */}
@@ -40,18 +37,13 @@ const Header = () => {
37
</div>
38
39
{/* Mobile Menu Button */}
43
- <button
44
- className="md:hidden p-2"
45
- onClick={() => setIsMenuOpen(!isMenuOpen)}
46
- aria-label="Toggle menu"
47
- >
40
+ <button className="md:hidden p-2" onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Toggle menu">
41
{isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
42
</button>
43
</div>
44
45
{/* Mobile Menu */}
53
- {isMenuOpen && (
54
- <div className="md:hidden bg-background border-b border-border animate-fade-in">
46
+ {isMenuOpen && <div className="md:hidden bg-background border-b border-border animate-fade-in">
47
<nav className="container py-4 flex flex-col gap-4">
48
<a href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors py-2">
49
Personal
@@ -71,10 +63,7 @@ const Header = () => {
63
</Button>
64
</div>
65
</nav>
74
- </div>
75
- )}
76
- </header>
77
- );
66
+ </div>}
67
+ </header>;
68
};
79
-
80
-export default Header;
69
+export default Header;
\ No newline at end of file
src/components/landing/Hero.tsx
+5
-13
@@ -1,17 +1,11 @@
1
import { Button } from "@/components/ui/button";
2
import { ArrowRight } from "lucide-react";
3
-
3
const Hero = () => {
5
- return (
6
- <section className="pt-32 pb-20 md:pt-40 md:pb-32 bg-background overflow-hidden">
4
+ return <section className="pt-32 pb-20 md:pt-40 md:pb-32 bg-background overflow-hidden">
5
<div className="container">
6
<div className="max-w-4xl mx-auto text-center">
9
- <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight animate-fade-up">
10
- Money without borders
11
- </h1>
12
- <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto animate-fade-up animation-delay-100">
13
- Join over 16 million people and businesses who save money when they spend, send and manage money internationally.
14
- </p>
7
+ <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight animate-fade-up">Blockchain Expense Management</h1>
8
+ <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto animate-fade-up animation-delay-100">For CFOs with cross-border transactions, international payments & th</p>
9
<div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up animation-delay-200">
10
<Button variant="hero" size="lg">
11
Open an account
@@ -58,8 +52,6 @@ const Hero = () => {
52
</div>
53
</div>
54
</div>
61
- </section>
62
- );
55
+ </section>;
56
};
64
-
65
-export default Hero;
57
+export default Hero;
\ No newline at end of file