import { LEGAL_PAGES } from "~/lib/legal";
import { FEATURE_PAGES } from "~/lib/marketing/features";
import { LICENSE_NAME, SOURCE_URL } from "~/lib/marketing/site";
import { Logo } from "~/ui/Logo";
import { ExternalLink, TextLink } from "~/ui/TextLink";
const RESOURCES = [
{ to: "/features", label: "All features" },
{ to: "/self-host", label: "Self-host" },
{ to: "/explore", label: "Explore" },
{ to: "/abuse", label: "Report abuse" },
] as const;
const COLUMN_TITLE = "label-small mb-3 text-gray-500";
export function SiteFooter() {
return (
<footer className="border-t border-gray-900 bg-gray-950/60">
<div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 md:grid-cols-[1.5fr_1fr_1fr_1fr] md:px-6">
<div className="space-y-3">
<Logo />
<p className="max-w-xs text-sm text-gray-500">
Open-source Git hosting with code review, CI/CD and site hosting.
</p>
</div>
<nav aria-label="Product">
<h2 className={COLUMN_TITLE}>Product</h2>
<ul className="space-y-2 text-sm">
{FEATURE_PAGES.map((page) => (
<li key={page.slug}>
<TextLink to="/features/$slug" params={{ slug: page.slug }} tone="subtle" className="text-gray-400">
{page.nav}
</TextLink>
</li>
))}
</ul>
</nav>
<nav aria-label="Resources">
<h2 className={COLUMN_TITLE}>Resources</h2>
<ul className="space-y-2 text-sm">