Dia Footer

const columns = [
  { title: "Product", links: ["Overview", "Features", "Pricing"] },
  { title: "Resources", links: ["Docs", "Guides", "Support"] },
  { title: "Company", links: ["About", "Careers", "Contact"] },
  { title: "Legal", links: ["Privacy", "Terms", "Security"] },
]

export default function Page() {
  return (
    <DiaFooter theme="dia-browser" gradientHeight="40vh">
      <div className="mx-auto max-w-6xl px-6 pt-12">
        <div className="grid gap-12 pb-12 lg:grid-cols-6">
          <div className="lg:col-span-2">
            <h2 className="font-mono text-white">Lumen Studio</h2>
            <p className="mt-4 text-zinc-400">Design tooling for teams.</p>
          </div>
          <nav className="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-4">
            {columns.map((column) => (
              <div key={column.title}>
                <h3 className="text-white">{column.title}</h3>
                {column.links.map((link) => <a key={link} href="#">{link}</a>)}
              </div>
            ))}
          </nav>
        </div>
      </div>
    </DiaFooter>
  )
}