const groups = [
  { title: "Product", links: ["Overview", "Pricing", "Changelog", "Status"] },
  { title: "Developers", links: ["Documentation", "API reference", "Examples"] },
  { title: "Company", links: ["About", "Careers", "Contact"] },
]

export default function Footer() {
  return (
    <footer className="border-t border-border px-6 py-14">
      <div className="flex flex-col gap-10 md:flex-row md:justify-between">
        <div className="max-w-xs">
          <p className="text-sm font-semibold tracking-tight">Acme</p>
          <p className="mt-2 text-sm leading-relaxed text-muted">
            A typed, documented API for whatever your database already knows.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-10 sm:grid-cols-3">
          {groups.map((group) => (
            <div key={group.title}>
              <p className="text-sm font-medium">{group.title}</p>
              <ul className="mt-3 space-y-2 text-sm text-muted">
                {group.links.map((link) => (
                  <li key={link}>
                    <a href="#" className="transition-colors hover:text-fg">
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="mt-12 flex flex-col justify-between gap-3 border-t border-border pt-6 text-xs text-muted sm:flex-row">
        <p>© 2026 Acme, Inc.</p>
        <div className="flex gap-5">
          <a href="#" className="transition-colors hover:text-fg">
            Privacy
          </a>
          <a href="#" className="transition-colors hover:text-fg">
            Terms
          </a>
        </div>
      </div>
    </footer>
  )
}
Footer

Link columns

Single row
