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: {