Footer con llamada a la acción

/**
 * Footer con llamada a la acción: una banda grande con un mensaje y un botón, y debajo enlaces, redes y fila legal.
 * Ideal para cerrar una página de ventas. Solo CSS.
 *
 *   <CtaFooter
 *     title="¿Listo para empezar?"
 *     action={{ label: "Crear mi cuenta", href: "/registro" }}
 *     columns={[{ title: "Producto", links: [{ label: "Precios", href: "/precios" }] }]}
 *   />
 */

import type { CSSProperties } from "react";

export type CtaFooterProps = {
  title?: string;
  description?: string;
  action?: { label: string; href: string };
  brand?: string;
  columns?: { title: string; links: { label: string; href: string }[] }[];
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcft-root { box-sizing: border-box; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px); background: #0e1b4d; color: #b9c3ec; font-family: inherit; font-size: 15px; }
.gcft-band { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; overflow: hidden; padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: #ff6b57; color: #1d0905; }
.gcft-band::before, .gcft-band::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); pointer-events: none; }
.gcft-band::before { top: -80px; right: 14%; width: 220px; height: 220px; } .gcft-band::after { bottom: -110px; right: -50px; width: 280px; height: 280px; background: rgba(29, 9, 5, .12); }
.gcft-band > * { position: relative; z-index: 1; }
.gcft-band h2 { margin: 0; max-width: 14ch; font-size: clamp(32px, 4.6vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.gcft-band p { max-width: 38ch; margin: 14px 0 0; font-size: 17px; line-height: 1.5; }
.gcft-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 30px; border-radius: 999px; background: #1d0905; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; transition: transform .35s cubic-bezier(.16, 1, .3, 1), background-color .25s; }
.gcft-btn svg { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.gcft-btn:hover { transform: translateY(-3px); background: #000; } .gcft-btn:hover svg { transform: translateX(4px); }
.gcft-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.gcft-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(120px, 1fr)); gap: 32px; padding: clamp(32px, 5vw, 56px) clamp(4px, 1vw, 12px) 8px; }
.gcft-brand { margin: 0; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.gcft-grid h3 { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 600; }
.gcft-grid ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gcft-grid a { color: inherit; text-decoration: none; transition: color .2s; } .gcft-grid a:hover { color: #fff; }
.gcft-grid a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
.gcft-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 20px clamp(4px, 1vw, 12px) 0; border-top: 1px solid rgba(185, 195, 236, .2); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .gcft-btn, .gcft-btn svg { transition: none; } }
`;

const COLUMNS = [
  { title: "Producto", links: [{ label: "Funciones", href: "#funciones" }, { label: "Precios", href: "#precios" }] },
  { title: "Empresa", links: [{ label: "Nosotros", href: "#nosotros" }, { label: "Contacto", href: "#contacto" }] },
  { title: "Legal", links: [{ label: "Privacidad", href: "#privacidad" }, { label: "Términos", href: "#terminos" }] },
];

export function CtaFooter({
  title = "¿Listo para empezar?",
  description = "Crea tu cuenta en un minuto. Sin tarjeta de crédito y con soporte humano.",
  action = { label: "Crear mi cuenta", href: "#registro" },
  brand = "Estudio Lumen",
  columns = COLUMNS,
  className,
  style,
}: CtaFooterProps) {
  return (
    <>
      <style>{CSS}</style>
      <footer className={["gcft-root", className].filter(Boolean).join(" ")} style={style}>
        <div className="gcft-band">
          <div><h2>{title}</h2><p>{description}</p></div>
          <a className="gcft-btn" href={action.href}>{action.label}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg></a>
        </div>
        <div className="gcft-grid">
          <p className="gcft-brand">{brand}</p>
          {columns.map((column) => (
            <nav key={column.title} aria-label={column.title}>
              <h3>{column.title}</h3>
              <ul>{column.links.map((link) => <li key={link.href}><a href={link.href}>{link.label}</a></li>)}</ul>
            </nav>
          ))}
        </div>
        <div className="gcft-legal"><span>© {new Date().getFullYear()} {brand}</span><span>Hecho con cuidado</span></div>
      </footer>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/footer-cta

import { CtaFooter } from "./cta-footer";

export default function Ejemplo() {
  return <CtaFooter title="Ejemplo" />;
}