"use client"

import { ArrowRight, Mail } from "lucide-react"

const columns: { title: string; items: string[] }[] = [
  { title: "Catalog", items: ["Heroes", "Pricing", "Footers", "Auth"] },
  { title: "Build", items: ["Docs", "Changelog", "Templates", "Roadmap"] },
  { title: "Company", items: ["About", "Contact", "Press kit", "Brand"] },
]

export default function Footer04() {
  const year = new Date().getFullYear()

  return (
    <footer className="bg-background text-foreground">
      <div className="mx-auto max-w-6xl px-6 py-20 sm:py-24">
        <div className="relative isolate overflow-hidden rounded-3xl border border-border bg-card p-8 sm:p-12">
          <div
            aria-hidden
            className="absolute -right-20 -top-20 -z-10 size-72 rounded-full bg-foreground/[0.05] blur-3xl"
          />
          <div
            aria-hidden
            className="absolute -left-20 -bottom-20 -z-10 size-72 rounded-full bg-foreground/[0.05] blur-3xl"
          />

          <div className="flex flex-col items-center gap-5 text-center">
            <span className="grid size-10 place-items-center rounded-full border border-border bg-background text-foreground">
              <Mail className="size-4" />
            </span>
            <h2 className="text-balance font-semibold text-2xl tracking-tight sm:text-3xl">
              One short email a month. Zero noise.
            </h2>
            <p className="max-w-md text-pretty text-sm text-muted-foreground sm:text-base">
              New blocks, a peek at what&apos;s next on the roadmap and a
              little discount once in a while. Unsubscribe in one click.
            </p>

            <form
              onSubmit={(e) => e.preventDefault()}
              className="mt-2 flex w-full max-w-md items-center gap-2 rounded-full border border-border bg-background p-1"
            >
              <input
                type="email"
                required
                placeholder="you@domain.com"
                className="flex-1 bg-transparent px-3 py-1.5 text-sm placeholder:text-muted-foreground focus:outline-none"
              />
              <button
                type="submit"
                className="inline-flex items-center gap-1.5 rounded-full bg-foreground px-3.5 py-1.5 text-xs font-medium text-background transition-colors hover:bg-foreground/90"
              >
                Subscribe
                <ArrowRight className="size-3" />
              </button>
            </form>
          </div>
        </div>

        <div className="mt-14 grid gap-10 sm:grid-cols-3 sm:gap-12">
          {columns.map((column) => (
            <div key={column.title} className="flex flex-col gap-3">
              <h4 className="text-xs font-medium uppercase tracking-widest text-muted-foreground">
                {column.title}
              </h4>
              <ul className="flex flex-col gap-2">
                {column.items.map((item) => (
                  <li key={item}>
                    <a
                      href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
                      className="text-sm text-foreground/80 transition-colors hover:text-foreground"
                    >
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="mt-14 flex flex-col items-start justify-between gap-3 border-t border-border pt-6 text-xs text-muted-foreground sm:flex-row sm:items-center">
          <p>&copy; {year} blockus. Tiny but mighty.</p>
          <p className="font-mono uppercase tracking-widest">
            v1.0 · shipped recently
          </p>
        </div>
      </div>
    </footer>
  )
}
Footer

Product

More

Legal
