@smbcloud / wise-landing-forge
Code Commits Issues Pulls Cloud Agent CI/CD
main
main
tsx 152 lines 4.49 KB
Raw
1 import { Twitter, Instagram, Facebook, Linkedin } from "lucide-react";
2 const footerLinks = {
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 };
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 = () => {
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 rounded-full flex items-center justify-center bg-lime-400">
81 <span className="text-primary-foreground font-bold text-lg">
82 </span>
83 </div>
84 <span className="text-xl font-bold">Snac</span>
85 </a>
86 <div className="mt-6 flex items-center gap-4">
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" />
89 </a>)}
90 </div>
91 </div>
92
93 {/* Links */}
94 <div>
95 <h4 className="font-semibold mb-4">Company</h4>
96 <ul className="space-y-3">
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>
101 </li>)}
102 </ul>
103 </div>
104
105 <div>
106 <h4 className="font-semibold mb-4">Product</h4>
107 <ul className="space-y-3">
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>
112 </li>)}
113 </ul>
114 </div>
115
116 <div>
117 <h4 className="font-semibold mb-4">Resources</h4>
118 <ul className="space-y-3">
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>
123 </li>)}
124 </ul>
125 </div>
126
127 <div>
128 <h4 className="font-semibold mb-4">Legal</h4>
129 <ul className="space-y-3">
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>
134 </li>)}
135 </ul>
136 </div>
137 </div>
138
139 <div className="mt-16 pt-8 border-t border-secondary-foreground/10">
140 <div className="flex flex-col md:flex-row items-center justify-between gap-4">
141 <p className="text-sm text-secondary-foreground/50">
142 © 2024 Wise. All rights reserved.
143 </p>
144 <p className="text-xs text-secondary-foreground/40 max-w-xl text-center md:text-right">
145 Wise is authorised by the Financial Conduct Authority under the Electronic Money Regulations 2011 for the issuing of electronic money.
146 </p>
147 </div>
148 </div>
149 </div>
150 </footer>;
151 };
152 export default Footer;