Landing Scroll Story

Landing Scroll Story crea un sitio web de aterrizaje completo y ejecutable en Next.js a partir de la URL de un servicio, un README o un texto de presentación. Respondes como máximo tres preguntas y recibes un zip del proyecto listo para ejecutar y desplegar.

Dos plantillas

Light (prioridad SEO)

• Hero oscuro con barras en movimiento, navegación flotante en píldora, tarjetas bento, una vitrina fijada al hacer scroll, pasos de uso y FAQ
• Páginas de guía de detalle y JSON-LD de FAQPage y WebSite
• El sitemap y el robots permanecen cerrados hasta que configuras tu URL de producción (los despliegues Preview nunca se indexan)

Cinematic (prioridad visual)

• Coreografía con GSAP + ScrollTrigger + Lenis
• El hero se reduce hasta convertirse en una cuadrícula bento, intro con Lottie controlado por el scroll, tarjetas de valores, una vitrina en marquesina y un pie de página tipo telón
• Diseño adaptable para móvil incluido

Cómo funciona

1. Indica una URL, un README o una breve descripción.
2. Elige light o cinematic. La skill recomienda una y explica por qué.
3. Rellena los textos, define el color de tu marca con un solo comando, compila, revisa los tipos y comprueba anchos de escritorio y móvil.
4. Recibes el zip del proyecto con notas breves para ejecutarlo, editar los textos y desplegarlo (Vercel, Cloudflare, Search Console).

Resultado de ejemplo

Las capturas de abajo provienen de un servicio ficticio de ejemplo ("Brewly") creado con esta skill.

Conviene saber

• Las ilustraciones de la plantilla cinematic son geometría sencilla generada por código. Para un acabado profesional, sustituye los archivos de public/landing/ por tus propias ilustraciones.
• La plantilla cinematic renderiza varias secciones tras la hidratación, por lo que gran parte de su texto no aparece en el HTML del servidor. Elige light si el posicionamiento en buscadores es importante.
• Verificada en escritorio y en un viewport de 390 px de ancho en un entorno de desarrollo. No incluye pruebas en dispositivos reales ni en Safari.
• La calidad de los textos depende de tu material de origen. La skill no inventa cifras, clientes ni premios.

Licencias y atribución

• La plantilla cinematic deriva del código de la página de inicio del SEED Design System (github.com/daangn/seed-design), Apache-2.0, Copyright 2025 Danggeun Market Inc. El texto de la licencia y los avisos se incluyen en el proyecto entregado. NO se incluyen logotipos, nombres ni medios de SEED o Daangn. Este producto no está afiliado, patrocinado ni respaldado por Daangn.
• GSAP se usa bajo su licencia estándar gratuita. La fuente Pretendard está bajo SIL OFL 1.1.