MatiSolina/gtm-skills

Landing Page GTM

Construye páginas de aterrizaje SaaS de grado de producción con el lenguaje visual de cer0.ai — modo oscuro, minimalista, fondo con degradado y grano, microinteracciones con Framer Motion, componentes UI basados en shadcn, y textos persuasivos orientados a conversión en español (Río de la Plata) o inglés.

Cuándo usar este skill

• El usuario pide: "armame una landing", "build a landing page", "marketing site", "SaaS homepage", "página de producto".
• El usuario referencia: cer0.ai, Midday, Linear, Vercel como inspiración de diseño.
• El usuario quiere una estética oscura/minimalista para un producto SaaS B2B o B2C.
• El usuario está usando v0.dev y quiere prompts/componentes que sigan este estilo.

Stack (valores predeterminados no negociables)

• Next.js 15 App Router con server components por defecto.
• TypeScript con strict: true.
• Tailwind CSS v4 con variables CSS para theming (bg-background, text-foreground, etc.).
• shadcn/ui para componentes primitivos (button, card, accordion, dialog).
• Framer Motion (framer-motion) importado como m desde motion-provider para animaciones al entrar en vista.
• lucide-react para íconos (NUNCA emojis en la UI del producto).
• next/image para todas las imágenes con width/height explícitos.
• next/dynamic para secciones fuera de la pantalla (carga diferida).

Estructura de página obligatoria

Cada landing sigue este orden de secciones. Saltarse una sección requiere justificación explícita.

1. <Navbar /> — fijo, transparente → se vuelve borroso al hacer scroll.
2. <Hero /> — h1 + subtítulo + 2 CTAs + mockup del producto (columna derecha).
3. <LogoStrip /> — logotipos de clientes/prensa, monocromo (filter: brightness(0) invert(1)).
4. Vista previa del producto — captura de pantalla grande del dashboard en una tarjeta con marco y degradado de desvanecimiento en la parte inferior.
5. Secciones de características (3-5) — alternando izquierda/derecha, cada una = titular + párrafo + mockup visual.
6. <Benefits /> — cuadrícula de 3 columnas con ícono + titular + descripción de 1 línea.
7. <Pricing /> — 3 niveles, el nivel del medio resaltado con la insignia "Más elegido".
8. <Faq /> — acordeón con 5-7 objeciones reales, esquema JSON-LD FAQPage.
9. <Footer /> — minimalista, enlaces + redes sociales + legal.
10. Bloques JSON-LD — SoftwareApplication, Organization, FAQPage.

Sistema visual

Carga references/design-tokens.md para la especificación completa. Referencia rápida:

• Paleta: --background: #000, --foreground: #fafafa, --muted-foreground: #a1a1aa, --border: rgba(250,250,250,0.08).
• Fondo: Dos desenfoques radial-gradient (arriba-izquierda + abajo-derecha) con ~5% de opacidad, más una superposición de ruido PNG con opacidad 0.03 y mix-blend-overlay.
• Tipografía: Fuente display para titulares (Geist Sans o --font-display local). El cuerpo usa Inter. Los titulares tienen tracking-[-0.02em] y font-medium (NO font-bold — demasiado pesado para esta estética).
• Tamaños de titulares: text-[clamp(2.5rem,5vw,4.5rem)] para h1, text-balance. Usa clamps en todas partes para escalado fluido.
• Bordes: Siempre border-border/50 (50% de opacidad). Nunca bordes sólidos — demasiado agresivos.
• Superficies: bg-secondary/20, bg-secondary/30, bg-secondary/50 — siempre semitransparentes para dar profundidad.
• Botones: Píldoras (rounded-full), h-12, px-8. Primario: bg-foreground text-background. Secundario: border border-border/50 bg-secondary/30 backdrop-blur-sm.
• Tarjetas: rounded-[24px] exterior, rounded-[20px] interior (muñeca rusa). Bordes de 1px. Sombra sutil shadow-2xl shadow-black/20.
• Efectos de desenfoque: Los brillos de fondo usan blur-[100px] a blur-[120px]. Los desenfoques decorativos insertados en mockups usan blur-2xl.
• Animación: Desvanecimiento + desplazamiento de 10-40px, duration: 0.6-1s, escalonado cada 0.1-0.15s. Usa useInView({ once: true, margin: "-100px" }) para los activadores.

Patrones de copy

Carga references/copy-patterns.md para la guía completa. Reglas rápidas:

• Titular del Hero: Imperativo o declarativo, aborda el dolor ("Dejá de aceptar cheques a ciegas."). NUNCA "Bienvenido a X" o "X es una plataforma para...".
• Subtítulo del Hero: 1-2 oraciones. Qué hace + cómo + por qué importa.
• CTA principal: Verbo de acción en imperativo. "Probar gratis", "Empezar", "Crear cuenta". Siempre acción, nunca sustantivo ("Get started" no "Get started today!").
• CTA secundaria: Opción de menor fricción, a menudo informativa. "Ver demo", "Cómo funciona".
• Debajo del CTA: Línea de confianza. "+50.000 cheques analizados · Sin tarjeta de crédito". Usa puntos medios ·.
• Titulares de sección: Afirmación de un hecho, no pregunta. "El análisis llega en 3 segundos." no "¿Qué tan rápido es?".
• Tono para español: Voseo cuando la audiencia es argentina. Directo, sin lenguaje corporativo. ("Sacale una foto", no "Tome una fotografía").
• NO: "Revolucionario", "de vanguardia", "sinergia", "apalancamiento", "de clase mundial", "lo mejor de su clase".

Secuencia de construcción

Al generar una landing:

1. Haz al usuario 3 preguntas como máximo (salta si es obvio por el contexto):
   • ¿Qué hace el producto? (1 oración)
   • ¿Quién es la audiencia?
   • ¿Cuál es la acción principal del CTA?
2. Genera el Hero primero. Obtén la aprobación del Hero antes de construir el resto.
3. Construye las secciones de forma incremental — una sección por respuesta, con el usuario aprobando el copy antes de continuar.
4. Agrega el JSON-LD al final, nunca lo omitas (el SEO importa).
5. Verifica accesibilidad: todas las imágenes tienen alt, todos los botones son <button> o <a> reales, el contraste de color cumple WCAG AA.

Antipatrones (rechazar estos)

• Hero con foto de stock de "equipo diverso sonriendo frente a una laptop".
• Hero con degradado genérico sin mockup del producto.
• Precios con "Contactar a ventas" para cada nivel (en SaaS en etapa temprana).
• Ocultar el precio por completo.
• Más de 3 CTAs en la mitad superior de la página (fuerza parálisis por decisión).
• Carruseles para testimonios (bajo compromiso, perjudica el LCP).
• motion.div con transition: { duration: 2 } — demasiado lento.
• Modo claro como predeterminado (este skill = oscuro primero).

Referencias

Leer bajo demanda:

• references/sections.md — anatomía de cada sección con patrones de código.
• references/design-tokens.md — tokens completos de color, tipografía y espaciado.
• references/copy-patterns.md — fórmulas para titulares, biblioteca de CTAs, patrones de FAQ.
• references/seo-jsonld.md — plantillas de schema.org para landings SaaS.

Plantillas

En templates/:

• page.tsx — página raíz con todas las secciones, importaciones dinámicas, JSON-LD.
• hero.tsx — componente Hero con patrón de mockup en columna derecha.
• pricing.tsx — tarjeta de 3 niveles con el nivel medio resaltado.
• faq.tsx — acordeón FAQ con JSON-LD.
• navbar.tsx — navbar sensible al scroll con desenfoque de fondo.

Copia una plantilla, adapta el copy y las props. No reescribas desde cero.

Código de referencia

Referencia en vivo: /Users/mati/Clientes/rosental/radiant-compliance/apps/web/ (código fuente de cer0.ai). Ante la duda, refleja exactamente los patrones de ese código. Ha sido probado en producción.