Visual edit in Lovable
Edited UI in Lovable
gpt-engineer-app[bot] committed
Nov 27, 2025 at 14:15 UTC
884594d6f3a6c6c411b7cfed6848a4b404ab51e9
1 file changed
+85
-66
src/components/landing/Footer.tsx
+85
-66
@@ -1,63 +1,92 @@
1
import { Twitter, Instagram, Facebook, Linkedin } from "lucide-react";
2
-
2
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
- ],
3
+ company: [{
4
+ label: "About",
5
+ href: "#"
6
+ }, {
7
+ label: "Careers",
8
+ href: "#"
9
+ }, {
10
+ label: "Press",
11
+ href: "#"
12
+ }, {
13
+ label: "Blog",
14
+ href: "#"
15
+ }],
16
+ product: [{
17
+ label: "Personal",
18
+ href: "#"
19
+ }, {
20
+ label: "Business",
21
+ href: "#"
22
+ }, {
23
+ label: "Wise Card",
24
+ href: "#"
25
+ }, {
26
+ label: "Pricing",
27
+ href: "#"
28
+ }],
29
+ resources: [{
30
+ label: "Help Centre",
31
+ href: "#"
32
+ }, {
33
+ label: "Currency Converter",
34
+ href: "#"
35
+ }, {
36
+ label: "Rate Alerts",
37
+ href: "#"
38
+ }, {
39
+ label: "API",
40
+ href: "#"
41
+ }],
42
+ legal: [{
43
+ label: "Terms",
44
+ href: "#"
45
+ }, {
46
+ label: "Privacy",
47
+ href: "#"
48
+ }, {
49
+ label: "Cookies",
50
+ href: "#"
51
+ }, {
52
+ label: "Security",
53
+ href: "#"
54
+ }]
55
};
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
-
56
+const socialLinks = [{
57
+ icon: Twitter,
58
+ href: "#",
59
+ label: "Twitter"
60
+}, {
61
+ icon: Instagram,
62
+ href: "#",
63
+ label: "Instagram"
64
+}, {
65
+ icon: Facebook,
66
+ href: "#",
67
+ label: "Facebook"
68
+}, {
69
+ icon: Linkedin,
70
+ href: "#",
71
+ label: "LinkedIn"
72
+}];
73
const Footer = () => {
38
- return (
39
- <footer className="bg-secondary text-secondary-foreground py-16 md:py-20">
74
+ return <footer className="bg-secondary text-secondary-foreground py-16 md:py-20">
75
<div className="container">
76
<div className="grid grid-cols-2 md:grid-cols-5 gap-8 md:gap-12">
77
{/* Logo & Social */}
78
<div className="col-span-2 md:col-span-1">
79
<a href="/" className="flex items-center gap-2">
80
<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>
81
+ <span className="text-primary-foreground font-bold text-lg">
82
+ </span>
83
</div>
48
- <span className="text-xl font-bold">wise</span>
84
+ <span className="text-xl font-bold">Snac</span>
85
</a>
86
<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
- >
87
+ {socialLinks.map((social, index) => <a key={index} href={social.href} 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" aria-label={social.label}>
88
<social.icon className="w-5 h-5" />
59
- </a>
60
- ))}
89
+ </a>)}
90
</div>
91
</div>
92
@@ -65,52 +94,44 @@ const Footer = () => {
94
<div>
95
<h4 className="font-semibold mb-4">Company</h4>
96
<ul className="space-y-3">
68
- {footerLinks.company.map((link, index) => (
69
- <li key={index}>
97
+ {footerLinks.company.map((link, index) => <li key={index}>
98
<a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
99
{link.label}
100
</a>
73
- </li>
74
- ))}
101
+ </li>)}
102
</ul>
103
</div>
104
105
<div>
106
<h4 className="font-semibold mb-4">Product</h4>
107
<ul className="space-y-3">
81
- {footerLinks.product.map((link, index) => (
82
- <li key={index}>
108
+ {footerLinks.product.map((link, index) => <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>
86
- </li>
87
- ))}
112
+ </li>)}
113
</ul>
114
</div>
115
116
<div>
117
<h4 className="font-semibold mb-4">Resources</h4>
118
<ul className="space-y-3">
94
- {footerLinks.resources.map((link, index) => (
95
- <li key={index}>
119
+ {footerLinks.resources.map((link, index) => <li key={index}>
120
<a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
121
{link.label}
122
</a>
99
- </li>
100
- ))}
123
+ </li>)}
124
</ul>
125
</div>
126
127
<div>
128
<h4 className="font-semibold mb-4">Legal</h4>
129
<ul className="space-y-3">
107
- {footerLinks.legal.map((link, index) => (
108
- <li key={index}>
130
+ {footerLinks.legal.map((link, index) => <li key={index}>
131
<a href={link.href} className="text-sm text-secondary-foreground/70 hover:text-primary transition-colors">
132
{link.label}
133
</a>
112
- </li>
113
- ))}
134
+ </li>)}
135
</ul>
136
</div>
137
</div>
@@ -126,8 +147,6 @@ const Footer = () => {
147
</div>
148
</div>
149
</div>
129
- </footer>
130
- );
150
+ </footer>;
151
};
132
-
133
-export default Footer;
152
+export default Footer;
\ No newline at end of file