Plan único

/**
 * Plan único: una sola oferta, tipográfica y sin adornos. Precio enorme a la izquierda y lista de lo incluido en dos columnas a la derecha,
 * sobre un fondo de color pleno. Solo CSS.
 *
 *   <SinglePlan price="$29" period="al mes" features={["Todo incluido", "Soporte humano"]} cta={{ label: "Empezar", href: "/registro" }} />
 */

import type { CSSProperties } from "react";

export type SinglePlanProps = {
  title?: string;
  price?: string;
  period?: string;
  features?: string[];
  cta?: { label: string; href: string };
  note?: string;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcpo-root { box-sizing: border-box; display: grid; align-content: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding: clamp(36px, 7vw, 104px) clamp(20px, 6vw, 88px); background: #1536e8; color: #fff; font-family: inherit; }
.gcpo-title { margin: 0; max-width: 11ch; font-size: clamp(34px, 5vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.gcpo-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: clamp(20px, 4vw, 44px) 0 0; }
.gcpo-amount { font-size: clamp(88px, 14vw, 200px); font-weight: 700; line-height: .82; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.gcpo-period { color: #c4cffc; font-size: clamp(16px, 1.6vw, 22px); }
.gcpo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; border-top: 1.5px solid rgba(255, 255, 255, .5); }
.gcpo-list li { padding: 16px 0; border-bottom: 1.5px solid rgba(255, 255, 255, .22); font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 1.35; }
.gcpo-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: -12px; }
.gcpo-btn { display: inline-flex; align-items: center; min-height: 58px; padding: 0 34px; border-radius: 999px; background: #fff; color: #1536e8; font-size: 18px; font-weight: 700; text-decoration: none; transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
.gcpo-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(0, 0, 30, .6); }
.gcpo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.gcpo-note { margin: 0; color: #c4cffc; font-size: 15px; }
@media (max-width: 860px) { .gcpo-root { grid-template-columns: 1fr; } .gcpo-actions { grid-column: auto; margin-top: 0; } }
@media (max-width: 480px) { .gcpo-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gcpo-btn { transition: none; } }
`;

export function SinglePlan({
  title = "Un plan. Todo incluido.",
  price = "$29",
  period = "al mes por equipo",
  features = ["Proyectos ilimitados", "Personas ilimitadas", "Automatizaciones", "Historial completo", "Exportar tus datos", "Soporte humano", "Actualizaciones gratis", "Sin permanencia"],
  cta = { label: "Empezar ahora", href: "#registro" },
  note = "Cancela cuando quieras.",
  className,
  style,
}: SinglePlanProps) {
  return (
    <>
      <style>{CSS}</style>
      <section className={["gcpo-root", className].filter(Boolean).join(" ")} style={style}>
        <div>
          <h2 className="gcpo-title">{title}</h2>
          <p className="gcpo-price"><span className="gcpo-amount">{price}</span><span className="gcpo-period">{period}</span></p>
        </div>
        <ul className="gcpo-list">{features.map((feature) => <li key={feature}>{feature}</li>)}</ul>
        <div className="gcpo-actions"><a className="gcpo-btn" href={cta.href}>{cta.label}</a><p className="gcpo-note">{note}</p></div>
      </section>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/precio-unico

import { SinglePlan } from "./single-plan";

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