Template
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';
|
|
|
|
import { Logo } from '@/components/site/logo';
|
|
|
|
const columns = [
|
|
{
|
|
heading: 'Products',
|
|
links: ['Previews', 'Edge Network', 'Analytics', 'Storage', 'Firewall'],
|
|
},
|
|
{
|
|
heading: 'Resources',
|
|
links: ['Docs', 'Guides', 'Changelog', 'Templates', 'Status'],
|
|
},
|
|
{
|
|
heading: 'Company',
|
|
links: ['About', 'Careers', 'Blog', 'Customers', 'Contact'],
|
|
},
|
|
{
|
|
heading: 'Legal',
|
|
links: ['Privacy', 'Terms', 'Security', 'DPA', 'Cookies'],
|
|
},
|
|
];
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="border-t border-white/10">
|
|
<div className="mx-auto max-w-6xl px-6 py-16">
|
|
<div className="grid gap-10 md:grid-cols-[1.5fr_repeat(4,1fr)]">
|
|
<div>
|
|
<Logo />
|
|
<p className="mt-4 max-w-xs text-sm text-white/45">
|
|
The frontend cloud for teams that ship.
|
|
</p>
|
|
</div>
|
|
{columns.map((column) => (
|
|
<div key={column.heading}>
|
|
<h4 className="text-sm font-medium text-white/80">
|
|
{column.heading}
|
|
</h4>
|
|
<ul className="mt-4 space-y-3">
|
|
{column.links.map((link) => (
|
|
<li key={link}>
|
|
<a
|
|
href="#"
|
|
className="text-sm text-white/45 transition-colors hover:text-white"
|
|
>
|
|
{link}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-14 flex flex-col items-start justify-between gap-4 border-t border-white/10 pt-8 text-sm text-white/40 sm:flex-row sm:items-center">
|
|
<span>© 2026 Vertex, Inc. All rights reserved.</span>
|
|
<div className="flex items-center gap-2">
|
|
<a
|
|
href="https://github.com"
|
|
aria-label="GitHub"
|
|
className="inline-flex size-8 items-center justify-center rounded-md text-white/45 transition-colors hover:bg-white/5 hover:text-white"
|
|
>
|
|
<RiGithubFill className="size-4" aria-hidden="true" />
|
|
</a>
|
|
<a
|
|
href="https://x.com"
|
|
aria-label="X (Twitter)"
|
|
className="inline-flex size-8 items-center justify-center rounded-md text-white/45 transition-colors hover:bg-white/5 hover:text-white"
|
|
>
|
|
<RiTwitterXFill className="size-4" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|