paper-notebook-landing

Página de inicio estilo cuaderno de papel

Este skill convierte el contenido real de cualquier producto en una página de inicio de archivo único con un lenguaje visual cálido, hecho a mano, de "cuaderno escolar" que sigue siendo sereno y confiable. La construcción de referencia es example/index.html (Atlasio, una plataforma ficticia de estudio en Alemania, en TR/EN/DE). Ábrelo antes de empezar; references/components.md contiene cada patrón como código listo para copiar. screenshots/ muestra cómo debería verse cada sección.

Si el usuario señala un sitio de referencia, toma el estilo, nunca su logotipo, ilustraciones, fotos de producto, redacción o marca denominativa. Usa el nombre de marca, contenido y hechos propios del cliente.

1. Antes de diseñar: lee el sitio real

1. Abre el sitio actual del cliente (y cualquier folleto/PDF que comparta) y extrae el contenido real: propuesta de valor, pasos del proceso, servicios, números con sus fuentes y fechas, testimonios, respuestas de FAQ, datos de contacto.
2. Encuentra el proceso del cliente (p.ej. "Planificar → Preparar → Solicitar → Llegar"). Se convierte en la columna vertebral de la página: la etiqueta del cuaderno, el panel de etapas, la tira cómica y el texto copian las mismas etapas. Si el cliente tiene un folleto, su estructura gana sobre la del sitio web.
3. Anota lo que no debes inventar: precios, afirmaciones ("mejor", "más barato"), estadísticas, requisitos legales/de visa. Si el usuario pide ocultar precios, sustitúyelos con lenguaje de oferta ("gran oferta ✦", "consigue una oferta →", "beneficio del paquete ✦") en lugar de números falsos. Las cantidades oficiales (p.ej. el saldo requerido para una visa) son hechos, no precios; mantenlos con fuente + fecha.

2. ADN visual (mantén todos estos)

Elemento	Regla
Fondo	Papel crema #fdfbf9, nunca blanco puro; banda secundaria #f6efea. Solo un tema claro, a propósito.
Tinta	Cacao #2b1a07 para texto, carbón #171717 para contornos, apagado #8a7b6a para texto pequeño.
Acento	Naranja marcador #ff6f1e para escritura a mano, subrayados y el pie de página. Usa el acento propio del cliente si es cálido; si no, mantén el naranja como "marcador".
Colores de pegatinas	verde #22c55e, azul #3b82f6, rosa #ff66cf, amarillo adhesivo #fadb4b. Cada escena ilustrada posee uno de ellos para sus palabras destacadas.
Tipo de despliegue	Serif grueso, suave, ligeramente torcido, p.ej. Gelica o Recoleta (de pago). Opción gratuita: Fraunces con SOFT 100, WONK 1, peso 800–900.
Tipo de cuerpo / UI	Geist (o Inter) para listas, texto pequeño de botones, leyendas. Serif (Fraunces 400) para subtítulos y citas.
Escritura a mano	Caveat (tiene glifos turco/alemán). Solo para anotaciones, notas adhesivas, etiquetas en cuadernos, diálogos de cómic. Nunca para párrafos.
Botones	El botón "dibs": píldora crema con un anillo exterior crema de 4px, un borde interior carbón de 1.5px, etiqueta serif, sombra diminuta.
Formas	Tarjetas con radio 12px, botones 20px, pie de página con esquinas superiores de 56px. Los contornos son de 1.5–2px carbón, como de bolígrafo.
Sombras	Suaves y bajas: 0 2px 20px rgba(0,0,0,.06). Los objetos (cuadernos, notas adhesivas) tienen una sombra proyectada más larga debajo.
Navegación	Sin barra de navegación. Logotipo redondo fijo arriba a la izquierda; arriba a la derecha un selector de idioma, una píldora pequeña de "iniciar sesión" y el CTA "dibs".
Titular principal	Minúsculas, enorme (clamp 60–112px), dos líneas cortas, precedido por un saludo naranja escrito a mano ("Queridos padres,").

3. Patrones de sección (elige, ordena y rellena con contenido real)

Úsalos aproximadamente en este orden. Cada uno tiene un fragmento listo en references/components.md.

1. Hero + portada de cuaderno – saludo, titular en minúsculas, subtítulo de una línea con un comentario escrito a mano ("en un solo lugar. ¡de verdad!"), CTA "dibs", nota pequeña apagada. A la derecha: un cuaderno inclinado. Dos opciones de portada:
   • un cuaderno de cuero con una etiqueta de nombre blanca (Nombre / Objetivo / Plazo / Etapa 1/4) que lo personaliza con un usuario de ejemplo;
   • una portada adaptada del propio material impreso del cliente. Si tienen un folleto, booklet o portada de flyer, reconstrúyela en HTML/SVG al tamaño de portada (unidades de contenedor consulta) para que la web y la impresión coincidan. El ejemplo hace esto con un booklet "Pasaporte a tu futuro": azul marino, doble marco dorado, globo terráqueo y avión dorados, banda naranja "Estudia en Alemania".
2. Cuaderno impulsado por scroll – el cuaderno hero viaja hacia abajo mientras el usuario desplaza (se endereza, crece, se centra), luego su portada se abre para revelar una página de bienvenida con pegatinas de ojos y "¡TOCA PARA EMPEZAR!". Un cuaderno, un movimiento continuo.
3. Notas adhesivas – línea serif centrada con una palabra estirada ("Tooodo en un solo lugar.") y 4 notas amarillas rotadas con los puntos de prueba más sólidos.
4. Escenas ilustradas + panel de números romanos (2–3 de ellas) – ilustración CSS/SVG a sangre del mundo del usuario (escritorio, cielo con avión y horizonte, campus…), un panel crema con un encabezado serif cuyas palabras clave están coloreadas, una lista de características numeradas I, II, III… en el borde derecho, y una maqueta de dispositivo que cambia al hacer clic en un elemento. Una escena debe llevar el proceso de etapas del cliente (panel = etapas, dispositivo = pasos de esa etapa + barra de progreso).
5. Cuadrícula de doodle – cuadrícula 3×3 de iconos de línea dibujados a mano con leyendas escritas a mano; la celda central contiene el encabezado de la sección. Bueno para servicios / mercado. Texto de precio u oferta en escritura a mano naranja.
6. Lista en papel rayado – una hoja inclinada con margen rojo y reglas azules, lista de verificación escrita a mano (✓ o ✗), pequeñas etiquetas adhesivas alrededor. Bueno para requisitos, "qué está incluido", "qué nunca hacemos".
7. Cuadernos de colores – 3 cuadernos (azul con patrón de nubes, rosa, cobalto) con etiquetas de nombre como portadas de guías/productos.
8. Tira cómica – un cuadro por etapa del proceso, personajes SVG planos con contornos carbón, burbujas de diálogo de tamaño automático, leyenda debajo de cada cuadro con el número romano y nombre de la etapa. Luego testimonios cortos con reglas superiores discontinuas.
9. FAQ – filas <details> separadas por líneas discontinuas color melocotón, marcador naranja +/–.
10. Pie de página gigante – bloque naranja, radio superior 56px, titular serif crema, campo de boletín con botón "dibs", columnas de enlaces, y el nombre de la marca como una marca denominativa enorme de color naranja más oscuro.

4. Interacciones características

• Viaje + apertura del cuaderno – un solo elemento. Fase 1 (desde la parte superior de la página hasta que la sección del abridor se adhiere): interpolar translate, rotación (-14° → 0) y escala desde el rectángulo del marcador de posición hero hasta el centro del escenario. Fase 2 (mientras el escenario está fijo): --p 0→1 rota la portada rotateY(-178deg * p) alrededor de su borde izquierdo. Oculta el marcador de posición hero solo cuando JS se ejecuta y prefers-reduced-motion está desactivado; movimiento reducido muestra el libro ya abierto y estático.
• Panel → dispositivo – cada elemento de número romano es un <button aria-current>; su data-t (y opcional data-sub, listas de pasos separadas por tubería) se renderizan en la pantalla del dispositivo.
• Burbujas de diálogo de tamaño automático – nunca dibujes trayectorias de burbuja a mano alrededor del texto. Coloca solo <text> en un <g class="sb" data-cx data-y data-tx>; JS mide getBBox() después de document.fonts.ready, reduce la fuente si es más ancha que el marco, dibuja el rectángulo redondeado y una cola que apunta al hablante (data-tx), y sujeta la burbuja dentro del marco de 300px. Vuelve a ejecutar después de cada cambio de idioma.
• Cambio de idioma – mantén el idioma de origen en el HTML. Un diccionario asigna cada nodo de texto de origen recortado a [en, de, …]; recorre los nodos de texto una vez, almacena el original + espacios iniciales/finales, intercambia al hacer clic; también traduce placeholder, data-t, data-sub. Establece <html lang>, recuerda la elección en localStorage (envuelto en try/catch).

5. Reglas de construcción

• Un archivo HTML autónomo: CSS/JS en línea, solo Google Fonts, SVG en línea para cada ilustración. No se necesitan imágenes externas.
• El archivo independiente necesita <!doctype html>, <meta charset="utf-8"> y <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">, de lo contrario los teléfonos renderizan el diseño de escritorio.
• Usa main{overflow-x:clip} (no hidden) para que el cuaderno viajero no pueda causar desplazamiento lateral y position:sticky aún funcione.
• Todos los colores como tokens :root; la página es intencionalmente solo clara, así que establece color-scheme: light y un fondo de body explícito.
• Los botones son <button>/<a> reales con :focus-visible visible; el SVG decorativo obtiene aria-hidden="true"; los cuadros de cómic obtienen role="img" + aria-label describiendo la escena.
• Respeta prefers-reduced-motion: sin viaje, libro abierto, sin bamboleo al pasar el ratón.
• Puntos de interrupción: ≤980px apila escenas y oculta accesorios decorativos (.hide-sm); ≤600px mantiene solo el logotipo + selector de idioma en las esquinas y muestra el cómic un cuadro por fila.

6. Redacción del texto

• Habla a la persona al otro lado de la pantalla, oraciones cortas, cálido pero factual.
• Titular en minúsculas; todo lo demás en mayúscula inicial.
• Los comentarios escritos a mano son bromas o énfasis, de 1 a 3 palabras, como máximo uno por sección.
• Divide los encabezados que envuelven palabras coloreadas en partes que aún se lean naturalmente en todos los idiomas (¡el orden de las palabras cambia!). Prefiere estructuras como "Un plan. Cuatro etapas, catorce pasos" donde cada pieza se pueda traducir por sí sola.
• Marca a las personas de ejemplo como tales ("La historia de Elif es un viaje de ejemplo").

7. Lista de verificación final

• Todo el contenido es el contenido real del cliente; nada inventado; fuentes y fechas de "última comprobación" mantenidas.
• El cuaderno hero viaja y se abre suavemente; movimiento reducido muestra un libro abierto estático.
• Cada burbuja de diálogo contiene su texto en todos los idiomas (compruébalo con getBBox o a simple vista).
• Cada cambio de idioma no deja texto en el idioma de origen (escanea nodos de texto en busca de letras específicas del origen como ğ ş ı).
• Sin desplazamiento horizontal a 390px; las esquinas muestran solo logotipo + selector de idioma en teléfonos.
• Capturas de pantalla de cada sección a 1440×900 y 390×844 (ver scripts/screenshots.mjs).