92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import { AsciiBackground } from "./ascii-background";
|
|
import { IconMark } from "./icon-mark";
|
|
import { CONTACT_EMAIL, WEBSITE_URL } from "./site-constants";
|
|
import { ThemeToggle } from "./theme-toggle";
|
|
import { getTrackedDownloadHref } from "../lib/downloads";
|
|
|
|
const footerGroups = [
|
|
{
|
|
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-universal-installer"), external: true },
|
|
{ label: "Linux x64 AppImage", href: getTrackedDownloadHref("linux-x64-appimage"), 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 border-t border-[var(--border)] overflow-hidden">
|
|
<AsciiBackground cssVar="--accent" baseOpacity={0.04} speed={0.5} />
|
|
|
|
<div className="relative z-10 mx-auto max-w-6xl px-6 lg:px-8 pt-16 lg:pt-20 pb-10 lg:pb-12">
|
|
<div className="flex flex-col lg:flex-row gap-y-12 gap-x-8">
|
|
<div className="shrink-0 lg:w-64 mb-4 lg:mb-0">
|
|
<a href="#" className="inline-flex items-center gap-2.5" aria-label="AgentCompany home">
|
|
<IconMark size={28} />
|
|
<span className="text-[var(--text)] font-semibold text-lg tracking-tight">AgentCompany</span>
|
|
</a>
|
|
<p className="mt-4 text-sm leading-relaxed text-[var(--muted)] max-w-xs">
|
|
Local-first desktop control plane for autonomous AI companies.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-wrap gap-y-12 gap-x-8 justify-between">
|
|
{footerGroups.map((group) => (
|
|
<div key={group.title} className="min-w-[120px]">
|
|
<h3 className="text-sm font-semibold text-[var(--text)] tracking-tight mb-4">{group.title}</h3>
|
|
<ul className="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 text-[var(--muted)] hover:text-[var(--text)] transition-colors duration-200"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-14 lg:mt-16 pt-6 border-t border-[var(--border)]" />
|
|
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div className="flex items-center gap-4 text-xs text-[var(--muted)]">
|
|
<span>© {year} AgentCompany</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|