Flash Landing Page Generator

Generador de Flash Landing Page

Produce un archivo .html autónomo para el lanzamiento de un solo producto. El dueño lo pegará en su propio alojamiento o creador de páginas, por lo que la salida debe funcionar sin paso de compilación ni activos locales.

Lo que el dueño quiere (valores predeterminados — no preguntes de nuevo)

• Salida: Solo código HTML. Sin frameworks, herramientas de compilación ni archivos adicionales.
• Idioma: Indonesio primero, con frases ligeras en inglés donde aclaren las cosas ("Early Bird", "What You Will Get", "Register now").
• Objetivo: compra directa. Cada llamado a la acción apunta a UNA URL de pago (lynk.id o una pasarela de pago).
• Apariencia: simple pero con clase. Moderado, editorial, con amplio espacio en blanco. No una plantilla, no una "página AI" con degradados y emojis.
• El estilo es fresco por producto. La paleta, los tipos de letra y la composición del héroe se eligen a partir del producto mismo. Nunca reutilices el aspecto del producto anterior.
• Simple por defecto. Sin cuenta regresiva, testimonios, preguntas frecuentes, ventanas emergentes o widgets de prueba social a menos que el dueño lo solicite explícitamente.

Entradas a recopilar

Pregunta solo lo que falte, en UN mensaje corto. Cualquier cosa sin respuesta se convierte en un marcador claramente etiquetado, nunca una invención.

Necesidad	Notas
Nombre del producto + promesa en una línea	Se convierte en H1 y meta descripción
Audiencia objetivo (principal / secundaria)	Impulsa el texto de la sección "Untuk Siapa"
Beneficios o resultados clave	3–6 elementos
Qué incluye (entregables / módulos / bonificaciones)	Se convierte en la cuadrícula "What You Will Get"
Precio, precio tachado, plazo/fecha límite	Bloque de precio
Detalles del evento (fecha, hora, formato) si es un producto en vivo	Barra de información
URL de pago	Va en CHECKOUT_URL
Folleto / imagen de referencia / colores de marca / fotos	Se usa para la paleta + estado de ánimo; si una foto no es utilizable, no la incrustes
Palabras de ambiente o una referencia	Opcional; de lo contrario, inferir del producto

Nunca fabriques: testimonios, conteos de estudiantes, calificaciones, "como se vio en", garantías, credenciales del mentor, afirmaciones de ingresos o plazos que el dueño no haya indicado. Si la fuente dice "praktisi berpengalaman", escribe exactamente eso.

Proceso

1. Lee el resumen y cualquier folleto/referencia. Extrae los hechos palabra por palabra (nombres, fechas, precios, títulos de elementos). Estos son la única fuente de verdad.
2. Elige una dirección de diseño (2–3 líneas, dila al usuario antes de construir):
   • Paleta: 1 tinta, 1 fondo, 1 acento, 1 superficie suave. Derívala del folleto/marca si se proporciona, si no, del mundo del producto.
   • Tipo: una cara de exhibición + una cara de cuerpo de Google Fonts; opcionalmente un solo acento manuscrito usado con moderación.
   • Héroe: el movimiento distintivo para este producto (título enorme con serifa, panel dividido, prueba numérica, etc.).
3. Construye desde la estructura a continuación, usando reference/example-workshop.html solo como referencia estructural y de calidad. Re-tematiza y recompón; no copies sus colores o fuentes.
4. Verifica (consulta la lista de verificación) en un navegador a 375 px de ancho y en escritorio.
5. Entrega la ruta del archivo más una lista corta de lo que el dueño debe completar.

Estructura de la página (adapta, no fuerces)

1. Héroe — ceja, H1, promesa en una línea, CTA principal, panel/visual de soporte pequeño
2. Barra de información — fecha/hora/formato (productos en vivo) o datos clave (productos digitales)
3. Untuk Siapa — objetivo principal + objetivo secundario
4. What You Will Get — 3 o 6 elementos en una cuadrícula con bordes, numerados
5. Bloque de precio — precio normal tachado, precio resaltado, nota breve, CTA
6. Línea de confianza — 2–3 puntos factuales breves tomados del resumen
7. Pie de página — nota de marca/marca registrada si se nombra un producto de terceros
8. Barra CTA fija móvil — precio + botón, oculta en escritorio

Omite las secciones que el producto no necesita. Una página corta que es verdadera vence a una página larga que está rellena.

Reglas de ingeniería

• Archivo único; CSS en <style>, JS en un <script> pequeño; fuentes solo a través de <link> de Google Fonts.
• Tokens de diseño como variables CSS en :root con un comentario "EDIT BAGIAN INI SAJA UNTUK PRODUK BARU".
• Un const CHECKOUT_URL = "https://lynk.id/USERNAME/PRODUK"; al inicio del script; cada ancla [data-cta] lo lee. Deja un comentario TODO para el dueño.
• Iconos SVG en línea (estilo trazo, currentColor). Sin emojis como iconos.
• Diseño responsivo mobile-first; sin desplazamiento horizontal a 375 px; clamp() para tamaños de título.
• Revelar al desplazar con IntersectionObserver, con respaldo prefers-reduced-motion y un respaldo sin IO.
• Accesible: hitos semánticos (header, section, footer), estilos focus-visible, contraste de texto ≥ 4.5:1, alt/aria en elementos visuales significativos, lang="id".
• <title>, meta descripción y meta viewport presentes.
• El texto de acento manuscrito/script debe permanecer decorativo y nunca contener información requerida.
• Las anotaciones decorativas no deben superponerse ni desbordarse en móvil (posicionarlas absolutamente solo a ≥ 820 px).

Lista de verificación

• Cada precio, fecha, nombre y título de elemento coincide exactamente con la fuente
• Todos los CTA se resuelven a CHECKOUT_URL (o #daftar para el desplazamiento del héroe)
• document.documentElement.scrollWidth <= innerWidth a 375 px y 1024 px
• Sin superposición de texto a 375 px; la barra fija no cubre el contenido del pie de página (el cuerpo tiene relleno inferior)
• Sin afirmaciones, números o credenciales inventados
• Solo están presentes las secciones que el dueño solicitó

Mensaje de entrega (manténlo corto, en indonesio, informal)

Indica: ruta del archivo, dirección de diseño en una línea y una lista "yang perlu lu isi" (enlace de pago, foto, nombre del mentor, cualquier cosa que quede como marcador). Ofrece un ajuste concreto siguiente, no un menú.