Changes
gpt-engineer-app[bot] committed
Nov 27, 2025 at 13:14 UTC
c1550632192e1f7f41ce3fdd9c6340054a8303e4
13 files changed
+670
-149
index.html
+8
-6
@@ -3,18 +3,20 @@
3
<head>
4
<meta charset="UTF-8" />
5
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>13ba640b-8aec-4d87-aa55-258a51e721ae</title>
7
- <meta name="description" content="Lovable Generated Project" />
8
- <meta name="author" content="Lovable" />
6
+ <title>Wise - Money Without Borders | International Money Transfers</title>
7
+ <meta name="description" content="Send money abroad with the real exchange rate. Join 16 million people saving on international transfers with Wise." />
8
+ <meta name="author" content="Wise" />
9
10
- <meta property="og:title" content="13ba640b-8aec-4d87-aa55-258a51e721ae" />
11
- <meta property="og:description" content="Lovable Generated Project" />
10
+ <meta property="og:title" content="Wise - Money Without Borders" />
11
+ <meta property="og:description" content="Send money abroad with the real exchange rate. Join 16 million people saving on international transfers." />
12
<meta property="og:type" content="website" />
13
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
14
15
<meta name="twitter:card" content="summary_large_image" />
16
- <meta name="twitter:site" content="@Lovable" />
16
+ <meta name="twitter:site" content="@Wise" />
17
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
18
+
19
+ <link rel="canonical" href="/" />
20
</head>
21
22
<body>
src/App.css
deleted
-42
@@ -1,42 +0,0 @@
1
-#root {
2
- max-width: 1280px;
3
- margin: 0 auto;
4
- padding: 2rem;
5
- text-align: center;
6
-}
7
-
8
-.logo {
9
- height: 6em;
10
- padding: 1.5em;
11
- will-change: filter;
12
- transition: filter 300ms;
13
-}
14
-.logo:hover {
15
- filter: drop-shadow(0 0 2em #646cffaa);
16
-}
17
-.logo.react:hover {
18
- filter: drop-shadow(0 0 2em #61dafbaa);
19
-}
20
-
21
-@keyframes logo-spin {
22
- from {
23
- transform: rotate(0deg);
24
- }
25
- to {
26
- transform: rotate(360deg);
27
- }
28
-}
29
-
30
-@media (prefers-reduced-motion: no-preference) {
31
- a:nth-of-type(2) .logo {
32
- animation: logo-spin infinite 20s linear;
33
- }
34
-}
35
-
36
-.card {
37
- padding: 2em;
38
-}
39
-
40
-.read-the-docs {
41
- color: #888;
42
-}
src/components/landing/CTA.tsx
new
+53
@@ -0,0 +1,53 @@
1
+import { Button } from "@/components/ui/button";
2
+import { ArrowRight, Check } from "lucide-react";
3
+
4
+const benefits = [
5
+ "No hidden fees",
6
+ "Real exchange rate",
7
+ "Fast transfers",
8
+ "Bank-level security",
9
+];
10
+
11
+const CTA = () => {
12
+ return (
13
+ <section className="py-20 md:py-32 bg-background">
14
+ <div className="container">
15
+ <div className="max-w-4xl mx-auto bg-muted rounded-3xl p-8 md:p-16 text-center">
16
+ <h2 className="text-3xl md:text-5xl font-bold text-foreground">
17
+ Ready to get started?
18
+ </h2>
19
+ <p className="mt-4 text-lg text-muted-foreground max-w-xl mx-auto">
20
+ Join millions of people and businesses who trust Wise to move their money around the world.
21
+ </p>
22
+
23
+ <div className="mt-8 flex flex-wrap items-center justify-center gap-6">
24
+ {benefits.map((benefit, index) => (
25
+ <div key={index} className="flex items-center gap-2">
26
+ <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
27
+ <Check className="w-3 h-3 text-primary-foreground" />
28
+ </div>
29
+ <span className="text-sm font-medium text-foreground">{benefit}</span>
30
+ </div>
31
+ ))}
32
+ </div>
33
+
34
+ <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
35
+ <Button variant="hero" size="lg">
36
+ Create free account
37
+ <ArrowRight className="w-5 h-5" />
38
+ </Button>
39
+ <Button variant="outline" size="lg">
40
+ Compare pricing
41
+ </Button>
42
+ </div>
43
+
44
+ <p className="mt-6 text-sm text-muted-foreground">
45
+ Free to create an account. Terms apply.
46
+ </p>
47
+ </div>
48
+ </div>
49
+ </section>
50
+ );
51
+};
52
+
53
+export default CTA;
src/components/landing/Features.tsx
new
+63
@@ -0,0 +1,63 @@
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
+
26
+const Features = () => {
27
+ return (
28
+ <section id="features" className="py-20 md:py-32 bg-background">
29
+ <div className="container">
30
+ <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>
34
+ <p className="mt-4 text-lg text-muted-foreground">
35
+ We're building the best way to move and manage your money around the world.
36
+ </p>
37
+ </div>
38
+
39
+ <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
+ >
46
+ <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">
47
+ <feature.icon className="w-7 h-7 text-primary group-hover:text-primary-foreground transition-colors" />
48
+ </div>
49
+ <h3 className="text-xl font-semibold text-foreground mb-2">
50
+ {feature.title}
51
+ </h3>
52
+ <p className="text-muted-foreground">
53
+ {feature.description}
54
+ </p>
55
+ </div>
56
+ ))}
57
+ </div>
58
+ </div>
59
+ </section>
60
+ );
61
+};
62
+
63
+export default Features;
src/components/landing/Footer.tsx
new
+133
@@ -0,0 +1,133 @@
1
+import { Twitter, Instagram, Facebook, Linkedin } from "lucide-react";
2
+
3
+const footerLinks = {
4
+ company: [
5
+ { label: "About", href: "#" },
6
+ { label: "Careers", href: "#" },
7
+ { label: "Press", href: "#" },
8
+ { label: "Blog", href: "#" },
9
+ ],
10
+ product: [
11
+ { label: "Personal", href: "#" },
12
+ { label: "Business", href: "#" },
13
+ { label: "Wise Card", href: "#" },
14
+ { label: "Pricing", href: "#" },
15
+ ],
16
+ resources: [
17
+ { label: "Help Centre", href: "#" },
18
+ { label: "Currency Converter", href: "#" },
19
+ { label: "Rate Alerts", href: "#" },
20
+ { label: "API", href: "#" },
21
+ ],
22
+ legal: [
23
+ { label: "Terms", href: "#" },
24
+ { label: "Privacy", href: "#" },
25
+ { label: "Cookies", href: "#" },
26
+ { label: "Security", href: "#" },
27
+ ],
28
+};
29
+
30
+const socialLinks = [
31
+ { icon: Twitter, href: "#", label: "Twitter" },
32
+ { icon: Instagram, href: "#", label: "Instagram" },
33
+ { icon: Facebook, href: "#", label: "Facebook" },
34
+ { icon: Linkedin, href: "#", label: "LinkedIn" },
35
+];
36
+
37
+const Footer = () => {
38
+ return (
39
+ <footer className="bg-secondary text-secondary-foreground py-16 md:py-20">
40
+ <div className="container">
41
+ <div className="grid grid-cols-2 md:grid-cols-5 gap-8 md:gap-12">
42
+ {/* Logo & Social */}
43
+ <div className="col-span-2 md:col-span-1">
44
+ <a href="/" className="flex items-center gap-2">
45
+ <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
46
+ <span className="text-primary-foreground font-bold text-lg">W</span>
47
+ </div>
48
+ <span className="text-xl font-bold">wise</span>
49
+ </a>
50
+ <div className="mt-6 flex items-center gap-4">
51
+ {socialLinks.map((social, index) => (
52
+ <a
53
+ key={index}
54
+ href={social.href}
55
+ className="w-10 h-10 rounded-full bg-secondary-foreground/10 flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition-colors"
56
+ aria-label={social.label}
57
+ >
58
+ <social.icon className="w-5 h-5" />
59
+ </a>
60
+ ))}
61
+ </div>
62
+ </div>
63
+
64
+ {/* Links */}
65
+ <div>
66
+ <h4 className="font-semibold mb-4">Company</h4>
67
+ <ul className="space-y-3">
68
+ {footerLinks.company.map((link, index) => (
69
+ <li key={index}>
70
+ <a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
71
+ {link.label}
72
+ </a>
73
+ </li>
74
+ ))}
75
+ </ul>
76
+ </div>
77
+
78
+ <div>
79
+ <h4 className="font-semibold mb-4">Product</h4>
80
+ <ul className="space-y-3">
81
+ {footerLinks.product.map((link, index) => (
82
+ <li key={index}>
83
+ <a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
84
+ {link.label}
85
+ </a>
86
+ </li>
87
+ ))}
88
+ </ul>
89
+ </div>
90
+
91
+ <div>
92
+ <h4 className="font-semibold mb-4">Resources</h4>
93
+ <ul className="space-y-3">
94
+ {footerLinks.resources.map((link, index) => (
95
+ <li key={index}>
96
+ <a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
97
+ {link.label}
98
+ </a>
99
+ </li>
100
+ ))}
101
+ </ul>
102
+ </div>
103
+
104
+ <div>
105
+ <h4 className="font-semibold mb-4">Legal</h4>
106
+ <ul className="space-y-3">
107
+ {footerLinks.legal.map((link, index) => (
108
+ <li key={index}>
109
+ <a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
110
+ {link.label}
111
+ </a>
112
+ </li>
113
+ ))}
114
+ </ul>
115
+ </div>
116
+ </div>
117
+
118
+ <div className="mt-16 pt-8 border-t border-secondary-foreground/10">
119
+ <div className="flex flex-col md:flex-row items-center justify-between gap-4">
120
+ <p className="text-sm text-secondary-foreground/50">
121
+ © 2024 Wise. All rights reserved.
122
+ </p>
123
+ <p className="text-xs text-secondary-foreground/40 max-w-xl text-center md:text-right">
124
+ Wise is authorised by the Financial Conduct Authority under the Electronic Money Regulations 2011 for the issuing of electronic money.
125
+ </p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </footer>
130
+ );
131
+};
132
+
133
+export default Footer;
src/components/landing/Header.tsx
new
+80
@@ -0,0 +1,80 @@
1
+import { Button } from "@/components/ui/button";
2
+import { Menu, X } from "lucide-react";
3
+import { useState } from "react";
4
+
5
+const Header = () => {
6
+ 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">
10
+ <div className="container flex items-center justify-between h-16 md:h-20">
11
+ {/* Logo */}
12
+ <a href="/" className="flex items-center gap-2">
13
+ <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>
15
+ </div>
16
+ <span className="text-xl font-bold text-foreground">wise</span>
17
+ </a>
18
+
19
+ {/* Desktop Navigation */}
20
+ <nav className="hidden md:flex items-center gap-8">
21
+ <a href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
22
+ Personal
23
+ </a>
24
+ <a href="#how-it-works" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
25
+ Business
26
+ </a>
27
+ <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
28
+ Help
29
+ </a>
30
+ </nav>
31
+
32
+ {/* Desktop CTA */}
33
+ <div className="hidden md:flex items-center gap-4">
34
+ <Button variant="ghost" size="sm">
35
+ Log in
36
+ </Button>
37
+ <Button variant="default" size="sm">
38
+ Register
39
+ </Button>
40
+ </div>
41
+
42
+ {/* Mobile Menu Button */}
43
+ <button
44
+ className="md:hidden p-2"
45
+ onClick={() => setIsMenuOpen(!isMenuOpen)}
46
+ aria-label="Toggle menu"
47
+ >
48
+ {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
49
+ </button>
50
+ </div>
51
+
52
+ {/* Mobile Menu */}
53
+ {isMenuOpen && (
54
+ <div className="md:hidden bg-background border-b border-border animate-fade-in">
55
+ <nav className="container py-4 flex flex-col gap-4">
56
+ <a href="#features" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors py-2">
57
+ Personal
58
+ </a>
59
+ <a href="#how-it-works" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors py-2">
60
+ Business
61
+ </a>
62
+ <a href="#" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors py-2">
63
+ Help
64
+ </a>
65
+ <div className="flex flex-col gap-2 pt-4 border-t border-border">
66
+ <Button variant="outline" className="w-full">
67
+ Log in
68
+ </Button>
69
+ <Button variant="default" className="w-full">
70
+ Register
71
+ </Button>
72
+ </div>
73
+ </nav>
74
+ </div>
75
+ )}
76
+ </header>
77
+ );
78
+};
79
+
80
+export default Header;
src/components/landing/Hero.tsx
new
+65
@@ -0,0 +1,65 @@
1
+import { Button } from "@/components/ui/button";
2
+import { ArrowRight } from "lucide-react";
3
+
4
+const Hero = () => {
5
+ return (
6
+ <section className="pt-32 pb-20 md:pt-40 md:pb-32 bg-background overflow-hidden">
7
+ <div className="container">
8
+ <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>
15
+ <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up animation-delay-200">
16
+ <Button variant="hero" size="lg">
17
+ Open an account
18
+ <ArrowRight className="w-5 h-5" />
19
+ </Button>
20
+ <Button variant="navy-outline" size="lg">
21
+ Send money now
22
+ </Button>
23
+ </div>
24
+ </div>
25
+
26
+ {/* Hero visual element */}
27
+ <div className="mt-16 md:mt-24 relative animate-fade-up animation-delay-300">
28
+ <div className="max-w-3xl mx-auto">
29
+ {/* Card mockup */}
30
+ <div className="relative">
31
+ <div className="absolute inset-0 bg-primary/20 rounded-3xl blur-3xl transform scale-95" />
32
+ <div className="relative bg-secondary rounded-3xl p-8 md:p-12">
33
+ <div className="flex flex-col md:flex-row items-center gap-8">
34
+ {/* Wise Card */}
35
+ <div className="w-64 h-40 bg-primary rounded-2xl p-6 flex flex-col justify-between shadow-2xl transform hover:-rotate-2 transition-transform duration-300">
36
+ <div className="flex justify-between items-start">
37
+ <div className="w-10 h-8 bg-primary-foreground/20 rounded" />
38
+ <span className="text-primary-foreground font-bold text-lg">wise</span>
39
+ </div>
40
+ <div className="text-primary-foreground">
41
+ <p className="text-sm opacity-80">•••• •••• •••• 4242</p>
42
+ <p className="text-sm font-medium mt-1">JOHN DOE</p>
43
+ </div>
44
+ </div>
45
+
46
+ {/* Transfer info */}
47
+ <div className="flex-1 text-secondary-foreground text-center md:text-left">
48
+ <p className="text-sm opacity-70">You send exactly</p>
49
+ <p className="text-4xl font-bold mt-1">1,000.00 EUR</p>
50
+ <div className="mt-4 flex items-center justify-center md:justify-start gap-2">
51
+ <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
52
+ <p className="text-sm opacity-70">Recipient gets 1,085.67 USD</p>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </section>
62
+ );
63
+};
64
+
65
+export default Hero;
src/components/landing/HowItWorks.tsx
new
+72
@@ -0,0 +1,72 @@
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
+
27
+const HowItWorks = () => {
28
+ return (
29
+ <section id="how-it-works" className="py-20 md:py-32 bg-secondary text-secondary-foreground">
30
+ <div className="container">
31
+ <div className="max-w-2xl mb-16">
32
+ <h2 className="text-3xl md:text-5xl font-bold">
33
+ How it works
34
+ </h2>
35
+ <p className="mt-4 text-lg text-secondary-foreground/70">
36
+ Sending money abroad should be as easy as sending a text. With Wise, it is.
37
+ </p>
38
+ </div>
39
+
40
+ <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
+ >
47
+ {/* 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
+ )}
51
+
52
+ <div className="mb-4">
53
+ <span className="text-6xl font-bold text-primary/30">{step.number}</span>
54
+ </div>
55
+ <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
56
+ <p className="text-secondary-foreground/70">{step.description}</p>
57
+ </div>
58
+ ))}
59
+ </div>
60
+
61
+ <div className="mt-16 text-center">
62
+ <Button variant="hero" size="lg">
63
+ Get started now
64
+ <ArrowRight className="w-5 h-5" />
65
+ </Button>
66
+ </div>
67
+ </div>
68
+ </section>
69
+ );
70
+};
71
+
72
+export default HowItWorks;
src/components/landing/TrustIndicators.tsx
new
+33
@@ -0,0 +1,33 @@
1
+const stats = [
2
+ { value: "16M+", label: "Customers worldwide" },
3
+ { value: "$12B", label: "Transferred every month" },
4
+ { value: "70+", label: "Countries supported" },
5
+ { value: "50+", label: "Currencies available" },
6
+];
7
+
8
+const TrustIndicators = () => {
9
+ return (
10
+ <section className="py-16 md:py-24 bg-muted">
11
+ <div className="container">
12
+ <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
13
+ {stats.map((stat, index) => (
14
+ <div
15
+ key={index}
16
+ className="text-center animate-fade-up"
17
+ style={{ animationDelay: `${index * 100}ms` }}
18
+ >
19
+ <p className="text-3xl md:text-5xl font-bold text-foreground">
20
+ {stat.value}
21
+ </p>
22
+ <p className="mt-2 text-sm md:text-base text-muted-foreground">
23
+ {stat.label}
24
+ </p>
25
+ </div>
26
+ ))}
27
+ </div>
28
+ </div>
29
+ </section>
30
+ );
31
+};
32
+
33
+export default TrustIndicators;
src/components/ui/button.tsx
+15
-9
@@ -5,21 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority";
5
import { cn } from "@/lib/utils";
6
7
const buttonVariants = cva(
8
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
8
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-semibold ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9
{
10
variants: {
11
variant: {
12
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
13
- destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
14
- outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
15
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
16
- ghost: "hover:bg-accent hover:text-accent-foreground",
12
+ default: "bg-primary text-primary-foreground hover:bg-lime-dark rounded-full",
13
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-full",
14
+ outline: "border-2 border-foreground bg-transparent text-foreground hover:bg-foreground hover:text-background rounded-full",
15
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 rounded-full",
16
+ ghost: "hover:bg-accent hover:text-accent-foreground rounded-lg",
17
link: "text-primary underline-offset-4 hover:underline",
18
+ // Wise-style variants
19
+ hero: "bg-primary text-primary-foreground hover:bg-lime-dark rounded-full shadow-lg hover:shadow-xl hover:-translate-y-0.5",
20
+ "hero-outline": "border-2 border-primary bg-transparent text-primary hover:bg-primary hover:text-primary-foreground rounded-full",
21
+ navy: "bg-secondary text-secondary-foreground hover:bg-navy-light rounded-full",
22
+ "navy-outline": "border-2 border-secondary bg-transparent text-secondary hover:bg-secondary hover:text-secondary-foreground rounded-full",
23
},
24
size: {
20
- default: "h-10 px-4 py-2",
21
- sm: "h-9 rounded-md px-3",
22
- lg: "h-11 rounded-md px-8",
25
+ default: "h-11 px-6 py-2",
26
+ sm: "h-9 px-4",
27
+ lg: "h-14 px-8 text-base",
28
+ xl: "h-16 px-10 text-lg",
29
icon: "h-10 w-10",
30
},
31
},
src/index.css
+113
-63
@@ -2,95 +2,78 @@
2
@tailwind components;
3
@tailwind utilities;
4
5
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
6
-All colors MUST be HSL.
7
-*/
5
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
6
7
@layer base {
8
:root {
9
--background: 0 0% 100%;
12
- --foreground: 222.2 84% 4.9%;
10
+ --foreground: 220 26% 14%;
11
12
--card: 0 0% 100%;
15
- --card-foreground: 222.2 84% 4.9%;
13
+ --card-foreground: 220 26% 14%;
14
15
--popover: 0 0% 100%;
18
- --popover-foreground: 222.2 84% 4.9%;
16
+ --popover-foreground: 220 26% 14%;
17
20
- --primary: 222.2 47.4% 11.2%;
21
- --primary-foreground: 210 40% 98%;
18
+ /* Wise signature lime green */
19
+ --primary: 93 72% 67%;
20
+ --primary-foreground: 220 26% 14%;
21
23
- --secondary: 210 40% 96.1%;
24
- --secondary-foreground: 222.2 47.4% 11.2%;
22
+ /* Dark navy */
23
+ --secondary: 220 26% 14%;
24
+ --secondary-foreground: 0 0% 100%;
25
26
- --muted: 210 40% 96.1%;
27
- --muted-foreground: 215.4 16.3% 46.9%;
26
+ --muted: 220 14% 96%;
27
+ --muted-foreground: 220 13% 46%;
28
29
- --accent: 210 40% 96.1%;
30
- --accent-foreground: 222.2 47.4% 11.2%;
29
+ --accent: 93 72% 67%;
30
+ --accent-foreground: 220 26% 14%;
31
32
- --destructive: 0 84.2% 60.2%;
33
- --destructive-foreground: 210 40% 98%;
32
+ --destructive: 0 84% 60%;
33
+ --destructive-foreground: 0 0% 100%;
34
35
- --border: 214.3 31.8% 91.4%;
36
- --input: 214.3 31.8% 91.4%;
37
- --ring: 222.2 84% 4.9%;
35
+ --border: 220 13% 91%;
36
+ --input: 220 13% 91%;
37
+ --ring: 93 72% 67%;
38
39
- --radius: 0.5rem;
39
+ --radius: 0.75rem;
40
41
- --sidebar-background: 0 0% 98%;
42
-
43
- --sidebar-foreground: 240 5.3% 26.1%;
44
-
45
- --sidebar-primary: 240 5.9% 10%;
46
-
47
- --sidebar-primary-foreground: 0 0% 98%;
48
-
49
- --sidebar-accent: 240 4.8% 95.9%;
50
-
51
- --sidebar-accent-foreground: 240 5.9% 10%;
52
-
53
- --sidebar-border: 220 13% 91%;
54
-
55
- --sidebar-ring: 217.2 91.2% 59.8%;
41
+ /* Custom colors */
42
+ --navy: 220 26% 14%;
43
+ --navy-light: 220 20% 20%;
44
+ --lime: 93 72% 67%;
45
+ --lime-dark: 93 60% 55%;
46
+ --gray-warm: 220 14% 96%;
47
}
48
49
.dark {
59
- --background: 222.2 84% 4.9%;
60
- --foreground: 210 40% 98%;
50
+ --background: 220 26% 14%;
51
+ --foreground: 0 0% 98%;
52
62
- --card: 222.2 84% 4.9%;
63
- --card-foreground: 210 40% 98%;
53
+ --card: 220 20% 18%;
54
+ --card-foreground: 0 0% 98%;
55
65
- --popover: 222.2 84% 4.9%;
66
- --popover-foreground: 210 40% 98%;
56
+ --popover: 220 20% 18%;
57
+ --popover-foreground: 0 0% 98%;
58
68
- --primary: 210 40% 98%;
69
- --primary-foreground: 222.2 47.4% 11.2%;
59
+ --primary: 93 72% 67%;
60
+ --primary-foreground: 220 26% 14%;
61
71
- --secondary: 217.2 32.6% 17.5%;
72
- --secondary-foreground: 210 40% 98%;
62
+ --secondary: 220 20% 22%;
63
+ --secondary-foreground: 0 0% 98%;
64
74
- --muted: 217.2 32.6% 17.5%;
75
- --muted-foreground: 215 20.2% 65.1%;
65
+ --muted: 220 20% 22%;
66
+ --muted-foreground: 220 13% 65%;
67
77
- --accent: 217.2 32.6% 17.5%;
78
- --accent-foreground: 210 40% 98%;
68
+ --accent: 93 72% 67%;
69
+ --accent-foreground: 220 26% 14%;
70
80
- --destructive: 0 62.8% 30.6%;
81
- --destructive-foreground: 210 40% 98%;
71
+ --destructive: 0 62% 30%;
72
+ --destructive-foreground: 0 0% 98%;
73
83
- --border: 217.2 32.6% 17.5%;
84
- --input: 217.2 32.6% 17.5%;
85
- --ring: 212.7 26.8% 83.9%;
86
- --sidebar-background: 240 5.9% 10%;
87
- --sidebar-foreground: 240 4.8% 95.9%;
88
- --sidebar-primary: 224.3 76.3% 48%;
89
- --sidebar-primary-foreground: 0 0% 100%;
90
- --sidebar-accent: 240 3.7% 15.9%;
91
- --sidebar-accent-foreground: 240 4.8% 95.9%;
92
- --sidebar-border: 240 3.7% 15.9%;
93
- --sidebar-ring: 217.2 91.2% 59.8%;
74
+ --border: 220 20% 22%;
75
+ --input: 220 20% 22%;
76
+ --ring: 93 72% 67%;
77
}
78
}
79
@@ -100,6 +83,73 @@ All colors MUST be HSL.
83
}
84
85
body {
103
- @apply bg-background text-foreground;
86
+ @apply bg-background text-foreground font-sans antialiased;
87
+ font-family: 'Inter', sans-serif;
88
+ }
89
+}
90
+
91
+@layer utilities {
92
+ .text-balance {
93
+ text-wrap: balance;
94
+ }
95
+}
96
+
97
+/* Animations */
98
+@keyframes fade-up {
99
+ from {
100
+ opacity: 0;
101
+ transform: translateY(20px);
102
+ }
103
+ to {
104
+ opacity: 1;
105
+ transform: translateY(0);
106
+ }
107
+}
108
+
109
+@keyframes fade-in {
110
+ from {
111
+ opacity: 0;
112
+ }
113
+ to {
114
+ opacity: 1;
115
}
116
}
117
+
118
+@keyframes scale-in {
119
+ from {
120
+ opacity: 0;
121
+ transform: scale(0.95);
122
+ }
123
+ to {
124
+ opacity: 1;
125
+ transform: scale(1);
126
+ }
127
+}
128
+
129
+.animate-fade-up {
130
+ animation: fade-up 0.6s ease-out forwards;
131
+}
132
+
133
+.animate-fade-in {
134
+ animation: fade-in 0.5s ease-out forwards;
135
+}
136
+
137
+.animate-scale-in {
138
+ animation: scale-in 0.4s ease-out forwards;
139
+}
140
+
141
+.animation-delay-100 {
142
+ animation-delay: 100ms;
143
+}
144
+
145
+.animation-delay-200 {
146
+ animation-delay: 200ms;
147
+}
148
+
149
+.animation-delay-300 {
150
+ animation-delay: 300ms;
151
+}
152
+
153
+.animation-delay-400 {
154
+ animation-delay: 400ms;
155
+}
src/pages/Index.tsx
+17
-6
@@ -1,12 +1,23 @@
1
-// Update this page (the content is just a fallback if you fail to update the page)
1
+import Header from "@/components/landing/Header";
2
+import Hero from "@/components/landing/Hero";
3
+import TrustIndicators from "@/components/landing/TrustIndicators";
4
+import Features from "@/components/landing/Features";
5
+import HowItWorks from "@/components/landing/HowItWorks";
6
+import CTA from "@/components/landing/CTA";
7
+import Footer from "@/components/landing/Footer";
8
9
const Index = () => {
10
return (
5
- <div className="flex min-h-screen items-center justify-center bg-background">
6
- <div className="text-center">
7
- <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
8
- <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
9
- </div>
11
+ <div className="min-h-screen bg-background">
12
+ <Header />
13
+ <main>
14
+ <Hero />
15
+ <TrustIndicators />
16
+ <Features />
17
+ <HowItWorks />
18
+ <CTA />
19
+ </main>
20
+ <Footer />
21
</div>
22
);
23
};
tailwind.config.ts
+18
-23
@@ -7,12 +7,15 @@ export default {
7
theme: {
8
container: {
9
center: true,
10
- padding: "2rem",
10
+ padding: "1.5rem",
11
screens: {
12
- "2xl": "1400px",
12
+ "2xl": "1280px",
13
},
14
},
15
extend: {
16
+ fontFamily: {
17
+ sans: ['Inter', 'system-ui', 'sans-serif'],
18
+ },
19
colors: {
20
border: "hsl(var(--border))",
21
input: "hsl(var(--input))",
@@ -47,38 +50,30 @@ export default {
50
DEFAULT: "hsl(var(--card))",
51
foreground: "hsl(var(--card-foreground))",
52
},
50
- sidebar: {
51
- DEFAULT: "hsl(var(--sidebar-background))",
52
- foreground: "hsl(var(--sidebar-foreground))",
53
- primary: "hsl(var(--sidebar-primary))",
54
- "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
55
- accent: "hsl(var(--sidebar-accent))",
56
- "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
57
- border: "hsl(var(--sidebar-border))",
58
- ring: "hsl(var(--sidebar-ring))",
53
+ navy: {
54
+ DEFAULT: "hsl(var(--navy))",
55
+ light: "hsl(var(--navy-light))",
56
+ },
57
+ lime: {
58
+ DEFAULT: "hsl(var(--lime))",
59
+ dark: "hsl(var(--lime-dark))",
60
},
61
},
62
borderRadius: {
63
lg: "var(--radius)",
64
md: "calc(var(--radius) - 2px)",
65
sm: "calc(var(--radius) - 4px)",
66
+ xl: "1rem",
67
+ "2xl": "1.5rem",
68
},
69
keyframes: {
70
"accordion-down": {
68
- from: {
69
- height: "0",
70
- },
71
- to: {
72
- height: "var(--radix-accordion-content-height)",
73
- },
71
+ from: { height: "0" },
72
+ to: { height: "var(--radix-accordion-content-height)" },
73
},
74
"accordion-up": {
76
- from: {
77
- height: "var(--radix-accordion-content-height)",
78
- },
79
- to: {
80
- height: "0",
81
- },
75
+ from: { height: "var(--radix-accordion-content-height)" },
76
+ to: { height: "0" },
77
},
78
},
79
animation: {