97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import { Container } from "../ui/container";
|
|
import { Reveal } from "../ui/reveal";
|
|
import { Button } from "../ui/button";
|
|
import { Aurora } from "../ui/aurora";
|
|
import { IconMark } from "../brand/icon-mark";
|
|
import { getTrackedDownloadHref } from "../../lib/downloads";
|
|
import { CONTACT_EMAIL, WEBSITE_URL } from "../../lib/site-constants";
|
|
|
|
type FooterLink = { label: string; href: string; external?: boolean };
|
|
|
|
const footerGroups: { title: string; links: FooterLink[] }[] = [
|
|
{
|
|
title: "Product",
|
|
links: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "How it works", href: "#how-it-works" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Download", href: "#download" },
|
|
],
|
|
},
|
|
{
|
|
title: "Downloads",
|
|
links: [
|
|
{ label: "Apple Silicon", href: getTrackedDownloadHref("macos-arm64-dmg"), external: true },
|
|
{ label: "Intel Mac", href: getTrackedDownloadHref("macos-x64-dmg"), external: true },
|
|
{ label: "Windows Installer", href: getTrackedDownloadHref("windows-x64-installer"), external: true },
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
links: [
|
|
{ label: "Website", href: WEBSITE_URL, external: true },
|
|
{ label: "Contact", href: `mailto:${CONTACT_EMAIL}`, external: true },
|
|
{ label: "Download center", href: "#download" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export function Footer() {
|
|
const year = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="relative overflow-hidden bg-[var(--footer-bg)] text-[var(--footer-text)]">
|
|
<Aurora className="opacity-90" />
|
|
<Container className="relative">
|
|
<div className="border-b border-white/10 py-24 text-center md:py-32">
|
|
<Reveal>
|
|
<h2 className="font-display text-[clamp(2.75rem,1.8rem+4vw,5.5rem)] leading-[1] tracking-[-0.02em]">
|
|
Launch your company now.
|
|
</h2>
|
|
<div className="mt-8 flex justify-center">
|
|
<Button href="#download" variant="inverted">
|
|
Download
|
|
</Button>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
|
|
<div className="grid gap-10 py-14 md:grid-cols-[1.6fr_1fr_1fr_1fr]">
|
|
<div>
|
|
<a href="#" className="inline-flex items-center gap-2.5" aria-label="AgentCompany home">
|
|
<IconMark size={28} />
|
|
<span className="text-lg font-medium tracking-[-0.02em]">AgentCompany</span>
|
|
</a>
|
|
<p className="mt-4 max-w-[32ch] text-sm leading-relaxed opacity-60">
|
|
Local-first desktop control plane for autonomous AI companies.
|
|
</p>
|
|
</div>
|
|
|
|
{footerGroups.map((group) => (
|
|
<div key={group.title}>
|
|
<h3 className="eyebrow text-xs opacity-50">{group.title}</h3>
|
|
<ul className="mt-4 space-y-3">
|
|
{group.links.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
{...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
|
|
className="text-sm opacity-75 transition-opacity hover:opacity-100"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 py-6">
|
|
<p className="text-xs opacity-45">© {year} AgentCompany</p>
|
|
</div>
|
|
</Container>
|
|
</footer>
|
|
);
|
|
}
|