Creative Footer

footerfrom Community Creative

Live

AI Usage Rules

Use CreativeFooter for dark-themed landing pages. Include 2-3 link columns (Product, Company, Legal). Keep tagline to 1-2 sentences. Add social icons for brand presence. The gradient glow at the bottom adds visual interest.

Code Template

interface FooterColumn { title: string; links: Array<{ label: string; href: string }> }

interface CreativeFooterProps {
  logo: string
  tagline: string
  columns: FooterColumn[]
  copyright: string
  socials?: Array<{ label: string; href: string; icon: React.ReactNode }>
}

export function CreativeFooter({ logo, tagline, columns, copyright, socials }: CreativeFooterProps) {
  return (
    <footer className="relative overflow-hidden border-t border-white/10 bg-black">
      <div className="absolute bottom-0 left-1/2 h-64 w-[600px] -translate-x-1/2 translate-y-1/2 rounded-full bg-indigo-600/10 blur-[128px]" />
      <div className="relative z-10 mx-auto max-w-7xl px-6 py-16">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          <div className="lg:col-span-1">
            <h3 className="text-xl font-bold text-white">{logo}</h3>
            <p className="mt-3 text-sm leading-relaxed text-gray-500">{tagline}</p>
            {socials && (
              <div className="mt-4 flex gap-3">
                {socials.map((s) => (
                  <a key={s.href} href={s.href} className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 text-gray-400 transition-all hover:border-white/20 hover:text-white" aria-label={s.label}>{s.icon}</a>
                ))}
              </div>
            )}
          </div>
          {columns.map((col) => (
            <div key={col.title}>
              <h4 className="text-sm font-semibold uppercase tracking-wider text-gray-400">{col.title}</h4>
              <ul className="mt-4 space-y-2.5">
                {col.links.map((link) => (
                  <li key={link.href}><a href={link.href} className="text-sm text-gray-500 transition-colors hover:text-white">{link.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-12 border-t border-white/10 pt-8 text-center text-xs text-gray-600">{copyright}</div>
      </div>
    </footer>
  )
}

Props Schema

Property	Type	Default
logo	string	—
columns	array	—
tagline	string	—
copyright	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "logo": {
      "type": "string"
    },
    "columns": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "links": {
            "type": "array"
          },
          "title": {
            "type": "string"
          }
        }
      }
    },
    "tagline": {
      "type": "string"
    },
    "copyright": {
      "type": "string"
    }
  }
}