cskwork/landing-page-skill

Constructor de Páginas de Aterrizaje

Resumen

Un sistema de diseño completo + biblioteca de componentes para construir páginas de aterrizaje hermosas e interactivas en HTML/CSS/JS plano — sin frameworks, sin paso de compilación. Se distribuye como tokens de diseño CSS reutilizables, patrones de interacción JS y plantillas de componentes HTML.

Principio fundamental: Copia los archivos del sistema de diseño, compón secciones a partir de plantillas de componentes, personaliza los tokens. Todo funciona con cero dependencias (opcional: Google Fonts CDN).

Cuándo Usarlo

• Construir una página de aterrizaje de producto, sitio de marketing o showcase
• Crear sitios de documentación con elementos interactivos
• Desplegar en GitHub Pages, Netlify o cualquier host estático
• Necesitar cambio de tema oscuro/claro, animaciones de scroll, tooltips
• Querer un diseño pulido sin React/Vue/herramientas de compilación

Cuándo NO usarlo:

• Aplicaciones web complejas con manejo de estado (usa un framework)
• Páginas renderizadas en servidor (esto es solo estático)
• Paneles de administración internos (es excesivo)

Referencia Rápida

Componente	Archivo	Clases Clave
Tokens de diseño	design-system/design-system.css	Variables :root, --accent-*, --gradient-*
Barra de navegación	components-reference.html	.navbar, .nav-links, .lang-toggle
Hero	components-reference.html	.hero, .hero-title, .gradient-text, .hero-stats
Tarjetas de características	components-reference.html	.feature-grid, .feature-card, .reveal
Bloques de código	components-reference.html	.code-block, .code-header, .code-copy
Tooltips	components-reference.html	.tooltip-trigger, [data-tooltip]
Pestañas	components-reference.html	.tab-list, .tab-btn, .tab-panel
Alternar tema	design-system.css + app-template.js	[data-theme], .icon-btn[data-toggle="theme"]
Botones de idioma	design-system.css	.lang-toggle, .lang-btn[data-lang]
Revelación al hacer scroll	app-template.js	.reveal → .visible vía IntersectionObserver
i18n	app-template.js	[data-i18n] + diccionario de traducciones

Sistema de Diseño

design-system.css incluye el conjunto completo de tokens para ambos temas. Ajusta estos para tu marca; lee el archivo para el resto.

Lee design-system/design-system.css para los tokens oscuro/claro mantenidos; ajústalos a la marca solicitada en lugar de mantener una segunda lista de tokens aquí.

Archivos

Archivo	Propósito
design-system/design-system.css	CSS completo: tokens, barra de navegación, hero, tarjetas, bloques de código, tooltips, pestañas, pie de página, responsivo
design-system/app-template.js	JS: revelación al hacer scroll, scroll de barra de navegación, copia de código, pestañas, alternar tema, menú móvil, i18n
design-system/components-reference.html	Cada componente con fragmentos HTML para copiar y pegar
templates/landing-template.html	Plantilla inicial completa — esquema con todas las secciones

Patrón de Tooltip

Los tooltips funcionan en escritorio (hover) y en móvil/táctil (tocar para alternar). Requiere app-template.js para soporte táctil.

<!-- Se abre hacia arriba (por defecto) -->
<span class="tooltip-trigger" data-tooltip="Explicación útil aquí">
    Pasa el ratón
</span>

<!-- Se abre hacia abajo (para activadores cerca de la parte superior de la página) -->
<span class="tooltip-trigger tooltip-bottom" data-tooltip="Explicación">
    Pasa el ratón
</span>

<!-- Variante ancha para texto más largo (se envuelve en móvil) -->
<span class="tooltip-trigger tooltip-wide" data-tooltip="Explicación más larga de varias líneas...">
    Pasa el ratón
</span>

Escritorio: CSS :hover muestra el tooltip. Móvil/tableta: JS agrega tocar para alternar con clic fuera para cerrar. Teclado: Tabulador para enfocar, Enter/Espacio para alternar, Escape para cerrar.

Las rutas táctil y de teclado funcionan alternando .tooltip-active en el activador. El CSS de tooltip escrito a mano debe estilizar .tooltip-trigger:hover::after y .tooltip-trigger.tooltip-active::after juntos, o el toque no hace nada — lee la sección 10 (Tooltips) de design-system/design-system.css antes de escribir el tuyo propio.

Apilamiento: los tooltips escapan de su contenedor mediante z-index:10 en .feature-card:hover, .code-block:hover, y .callout:hover. Mantén esas reglas, y recorta las esquinas redondeadas con border-radius en el elemento hijo (como hace .feature-card::before) — overflow:hidden en el contenedor recorta el tooltip y ningún z-index puede salvarlo.

Flujo de Trabajo de Construcción

1. Copia design-system.css, app-template.js, y templates/landing-template.html (renombrado como index.html) en tu proyecto — los tres juntos, ya que la plantilla los enlaza por nombre de archivo simple
2. Agrega secciones desde components-reference.html (características, bloques de código, pestañas, llamadas a la acción, pie de página) al esquema
3. Personaliza tokens en :root (colores, fuentes, degradados)
4. Agrega contenido al HTML, conecta las claves data-i18n si es multilingüe
5. Prueba localmente — abre index.html en un navegador y recorre cada fila de Errores Comunes a continuación; termina cuando cada fila esté verificada
6. Entrega los archivos verificados. Despliega solo cuando se solicite, utilizando el flujo de trabajo acordado de host y repositorio.

Desplegar en GitHub Pages

Cuando se solicite publicación, inspecciona el repositorio existente y la configuración de Pages, prepara los archivos revisados y sigue su flujo de trabajo de despliegue. Crea un repositorio público o cambia la visibilidad solo cuando esté autorizado. Prepara los archivos de salida nombrados, preservando el trabajo no relacionado. Verifica la revisión desplegada y el contenido en vivo antes de informar una URL pública; HTTP 200 solo no es prueba visual.

Errores Comunes

Error	Solución
Sin meta viewport	Agrega <meta name="viewport" content="width=device-width, initial-scale=1.0">
Falta [data-theme] en <html>	Establece <html data-theme="dark"> para el tema predeterminado
Elementos de revelación invisibles	Asegúrate de que app-template.js esté cargado y que .reveal tenga la lógica .visible correspondiente
Revelación dentro de panel de pestañas oculto	El cambio de pestaña revela automáticamente; o elimina .reveal del contenido de la pestaña
Tooltips cortados en la parte superior	Usa la variante .tooltip-bottom para activadores cerca de la parte superior de la ventana gráfica
Destello de tema al cargar	<script> en línea en <head> que lee localStorage.getItem('lp-theme') en data-theme antes del renderizado — ya está en templates/landing-template.html
Contenido sin JS invisible	class="no-js" en <html> + retroceso .no-js .reveal { opacity:1 }
Copia de código no funciona	Verifica que exista el botón .code-copy y que JS esté cargado
Destello de contenido sin estilo	Coloca el <link> de la fuente en <head> antes de la hoja de estilo
Faltan estilos de enfoque	Todos los elementos interactivos tienen el contorno :focus-visible integrado

Accesibilidad

El sistema de diseño incluye:

• Contornos :focus-visible en todos los elementos interactivos (navegación por teclado)
• Consulta de medios prefers-reduced-motion (desactiva animaciones)
• Retroceso .no-js (contenido visible sin JavaScript)
• Etiquetas ARIA en botones solo de icono
• Estructura HTML semántica (jerarquía de encabezados adecuada)
• Tokens de contraste de tema; verifica el contraste después de la personalización antes de afirmar conformidad con WCAG