Footer con nombre gigante

/**
 * Footer con el nombre de la marca gigante: una fila de enlaces arriba y la palabra ocupando todo el ancho, con letras que saltan al pasar el puntero.
 * El tamaño del nombre se ajusta al ancho del contenedor con unidades de contenedor (cqw), así que cabe en cualquier pantalla.
 *
 *   <WordmarkFooter wordmark="lumen" links={[{ label: "Instagram", href: "#" }, { label: "Correo", href: "mailto:hola@lumen.studio" }]} />
 */

import type { CSSProperties } from "react";

export type WordmarkFooterProps = {
  /** Nombre en minúsculas o mayúsculas; entre 3 y 10 letras se ve mejor. */
  wordmark?: string;
  links?: { label: string; href: string }[];
  note?: string;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcfw-root { container-type: inline-size; position: relative; box-sizing: border-box; overflow: hidden; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px) 0; background: #ff4d1c; color: #160b07; font-family: inherit; }
.gcfw-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 40px; font-size: 16px; font-weight: 600; }
.gcfw-top p { max-width: 28ch; margin: 0; line-height: 1.45; }
.gcfw-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.gcfw-links a { color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-underline-offset .25s cubic-bezier(.16, 1, .3, 1); }
.gcfw-links a:hover { text-underline-offset: 9px; }
.gcfw-links a:focus-visible { outline: 2px solid #160b07; outline-offset: 4px; }
.gcfw-word { display: flex; justify-content: center; margin: clamp(24px, 6vw, 80px) 0 0; font-weight: 800; line-height: .78; letter-spacing: -.06em; white-space: nowrap; user-select: none; transform: translateY(5%); }
.gcfw-word span { display: inline-block; transition: transform .5s cubic-bezier(.34, 1.7, .5, 1); }
.gcfw-word span:hover { transform: translateY(-9%) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .gcfw-word span { transition: none; } .gcfw-word span:hover { transform: none; } }
`;

export function WordmarkFooter({
  wordmark = "lumen",
  links = [{ label: "Instagram", href: "#instagram" }, { label: "LinkedIn", href: "#linkedin" }, { label: "Escríbenos", href: "#contacto" }],
  note = "Diseño y desarrollo para ideas que todavía no tienen forma.",
  className,
  style,
}: WordmarkFooterProps) {
  return (
    <>
      <style>{CSS}</style>
      <footer className={["gcfw-root", className].filter(Boolean).join(" ")} style={style}>
        <div className="gcfw-top">
          <p>{note}</p>
          <ul className="gcfw-links">{links.map((link) => <li key={link.href}><a href={link.href}>{link.label}</a></li>)}</ul>
        </div>
        <div className="gcfw-word" aria-label={wordmark} role="img" style={{ fontSize: `${Math.min(40, 185 / Math.max(wordmark.length, 3)).toFixed(1)}cqw` }}>
          {Array.from(wordmark).map((letter, index) => <span key={index} aria-hidden="true">{letter}</span>)}
        </div>
      </footer>
    </>
  );
}

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

import { WordmarkFooter } from "./wordmark-footer";

export default function Ejemplo() {
  return <WordmarkFooter wordmark="Ejemplo" />;
}