feature/branding
tsx 121 lines 4.16 KB
Raw
1 import Link from "next/link";
2 import { FaGithub } from "react-icons/fa";
3
4 const companyLinks = [
5 { href: "/about", label: "About" },
6 { href: "/services", label: "Platform" },
7 { href: "/contact", label: "Contact" },
8 { href: "/privacy-policy", label: "Privacy" },
9 { href: "/term-of-use", label: "Terms" },
10 ];
11
12 const resourceLinks = [
13 { href: "/posts", label: "Blog" },
14 { href: "/kti", label: "KTI (ID)" },
15 {
16 href: "https://docs.smbcloud.xyz",
17 label: "Docs",
18 external: true,
19 },
20 {
21 href: "https://sigit.si/",
22 label: "siGit",
23 external: true,
24 },
25 {
26 href: "https://ondeinference.com/",
27 label: "Onde Inference",
28 external: true,
29 },
30 {
31 href: "https://github.com/smbcloudXYZ",
32 label: "GitHub",
33 external: true,
34 icon: FaGithub,
35 },
36 ];
37
38 export default function Footer() {
39 return (
40 <footer className="border-t border-slate-200 dark:border-white/[0.06] px-6 py-12 lg:px-8">
41 <div className="mx-auto max-w-5xl">
42 <div className="flex flex-col gap-10 sm:flex-row sm:items-start sm:justify-between">
43 <div>
44 <Link href="/" className="mb-3 flex items-center gap-2">
45 <div className="flex h-6 w-[30px] items-center justify-center rounded bg-indigo-600 text-white">
46 <span className="text-[9px] font-bold leading-none">smb</span>
47 </div>
48 <span className="text-sm font-semibold text-slate-900 dark:text-white tracking-tight">
49 smbCloud Platform
50 </span>
51 </Link>
52 <p className="max-w-xs text-xs leading-relaxed text-slate-500 dark:text-slate-500">
53 Enterprise power at startup velocity
54 </p>
55 <p className="mt-2 text-xs text-slate-400 dark:text-slate-600">
56 Built by Splitfire AB in Stockholm, Sweden.
57 </p>
58 </div>
59
60 <div className="grid grid-cols-2 gap-x-12 gap-y-8 text-sm text-slate-500 dark:text-slate-500">
61 <div>
62 <p className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
63 Company
64 </p>
65 <div className="flex flex-col gap-3">
66 {companyLinks.map((link) => (
67 <Link
68 key={link.href}
69 href={link.href}
70 className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
71 >
72 {link.label}
73 </Link>
74 ))}
75 </div>
76 </div>
77
78 <div>
79 <p className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-600">
80 Resources
81 </p>
82 <div className="flex flex-col gap-3">
83 {resourceLinks.map((link) =>
84 link.external ? (
85 <Link
86 key={link.href}
87 href={link.href}
88 target="_blank"
89 rel="noopener noreferrer"
90 className="flex items-center gap-1.5 hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
91 >
92 {link.icon && <link.icon className="h-3.5 w-3.5" />}
93 {link.label}
94 </Link>
95 ) : (
96 <Link
97 key={link.href}
98 href={link.href}
99 className="hover:text-slate-900 dark:hover:text-slate-300 transition-colors"
100 >
101 {link.label}
102 </Link>
103 ),
104 )}
105 </div>
106 </div>
107 </div>
108 </div>
109
110 <div className="mt-10 flex items-center justify-between border-t border-slate-200 dark:border-white/[0.06] pt-6">
111 <p className="text-xs text-slate-400 dark:text-slate-600">
112 © {new Date().getFullYear()} smbCloud Platform. All rights reserved.
113 </p>
114 <p className="text-xs text-slate-400 dark:text-slate-600">
115 support@smbcloud.xyz
116 </p>
117 </div>
118 </div>
119 </footer>
120 );
121 }