Landing Scroll Story

O Landing Scroll Story cria um site de destino completo e executável em Next.js a partir da URL de um serviço, de um README ou de um texto de apresentação. Você responde no máximo a três perguntas e recebe um zip do projeto pronto para rodar e publicar.

Dois templates

Light (SEO em primeiro lugar)

• Hero escuro com barras em movimento, navegação flutuante em pílula, cards bento, vitrine fixada na rolagem, passos de uso e FAQ
• Páginas de guia detalhadas e JSON-LD de FAQPage e WebSite
• Sitemap e robots ficam fechados até você definir a URL de produção (deploys Preview nunca são indexados)

Cinematic (visual em primeiro lugar)

• Coreografia com GSAP + ScrollTrigger + Lenis
• O hero encolhe até virar uma grade bento, intro em Lottie controlada pela rolagem, cards de valores, vitrine em marquee e rodapé em cortina
• Layout responsivo para celular incluído

Como funciona

1. Informe uma URL, um README ou uma breve descrição.
2. Escolha light ou cinematic. A skill recomenda um e explica o motivo.
3. Ela preenche os textos, define a cor da sua marca com um único comando, compila, verifica os tipos e confere as larguras de desktop e celular.
4. Você recebe o zip do projeto com notas curtas sobre como rodar, editar os textos e publicar (Vercel, Cloudflare, Search Console).

Exemplo de resultado

As capturas de tela abaixo vêm de um serviço fictício de exemplo ("Brewly") criado com esta skill.

Bom saber

• As ilustrações do template cinematic são geometrias simples geradas por código. Para um acabamento profissional, substitua os arquivos em public/landing/ pelas suas próprias ilustrações.
• O template cinematic renderiza várias seções após a hidratação, então grande parte do texto não aparece no HTML do servidor. Escolha light se o posicionamento em buscadores for importante.
• Verificado em desktop e em uma largura de 390 px em ambiente de desenvolvimento. Testes em dispositivos reais e no Safari não estão incluídos.
• A qualidade dos textos depende do seu material de origem. A skill não inventa números, clientes nem prêmios.

Licenças e atribuição

• O template cinematic é derivado do código da landing page do SEED Design System (github.com/daangn/seed-design), Apache-2.0, Copyright 2025 Danggeun Market Inc. O texto da licença e os avisos acompanham o projeto entregue. Logotipos, nomes e mídias do SEED ou da Daangn NÃO estão incluídos. Este produto não é afiliado, patrocinado nem endossado pela Daangn.
• O GSAP é usado sob sua licença padrão gratuita. A fonte Pretendard está sob SIL OFL 1.1.