FooterBrand

npx shadcn@latest add "https://designpass.dev/r/FooterBrand-TS-TW.json"

/*!
 * FooterBrand, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/footer-brand
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import type { ReactNode } from "react";
import LiveCopyright from "@/components/layout/LiveCopyright";

export type FooterLink = { label: string; href: string };

const RAIL = "mx-auto w-full min-w-0 max-w-5xl px-4 sm:px-6 lg:px-8";

const DEFAULT_LINKS: FooterLink[] = [
  { label: "Research", href: "#research" },
  { label: "Company", href: "#company" },
  { label: "Careers", href: "#careers" },
  { label: "News", href: "#news" },
];

const DEFAULT_LEGAL: FooterLink[] = [
  { label: "Privacy", href: "#privacy" },
  { label: "Terms", href: "#terms" },
];

export type FooterBrandProps = {
  className?: string;
  brand?: string;
  statement?: string;
  links?: FooterLink[];
  legalLinks?: FooterLink[];
  copyright?: ReactNode;
  copyrightOwner?: string;
  copyrightSuffix?: string;
};

/**
 * Anthropic-inspired brand footer: large statement, sparse links, quiet legal.
 * Copyright year stays current via the shared LiveCopyright component.
 */
export default function FooterBrand({
  className = "",
  brand = "Atlas",
  statement = "A quieter inbox for everything agents leave behind.",
  links = DEFAULT_LINKS,
  legalLinks = DEFAULT_LEGAL,
  copyright,
  copyrightOwner,
  copyrightSuffix,
}: FooterBrandProps) {
  const owner = copyrightOwner ?? brand;

  return (
    <footer className={`w-full border-t border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] bg-[var(--tpl-chrome,#0a0a0a)] text-[color:var(--tpl-chrome-ink,#fff)] ${className}`.trim()}>
      <div className={`${RAIL} py-14 sm:py-16 lg:py-20`}>
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.35))]">{brand}</p>
        <p className="mt-5 max-w-3xl text-balance text-2xl font-semibold tracking-tight sm:text-3xl md:text-4xl">
          {statement}
        </p>
        <nav aria-label="Footer" className="mt-10">
          <ul className="flex flex-wrap gap-x-6 gap-y-2">
            {links.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.55))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <div className="mt-12 flex flex-col gap-3 border-t border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.35))]">
            {copyright ?? <LiveCopyright owner={owner} suffix={copyrightSuffix} />}
          </p>
          <ul className="flex flex-wrap gap-x-4 gap-y-2">
            {legalLinks.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="text-xs text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.4))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]/70"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}