Modelos

Todo projeto de landing-page nasce de um modelo. O modelo define as seções da página na ordem em que aparecem e os textos de exemplo. Tema, textos e ordem você ajusta depois, no projeto gerado.

Para criar com o modelo padrão, vendas, rode slash create minha-landing. Para escolher outro, acrescente --model com o nome dele, como em slash create minha-landing --model produto. Os cinco modelos são vendas, produto, evento, lancamento e captura.

vendas (padrão)

Use vendas para vender um curso, um produto digital ou um serviço com preço único, com compra direto no checkout. O botão de compra leva ao endereço de checkoutUrl em src/data/site.ts.

A página não tem cabeçalho com menu. As seções, na ordem, são Hero, Features, FeatureSplit, About, Testimonials, Pricing, Faq e CtaSection, seguidas do rodapé e do botão flutuante «Falar no WhatsApp».

Projeto criado em <projeto>.
Próximos passos, dentro da pasta:
  slash check                     confere conteúdo, contraste e SEO
  slash approve                   libera o conteúdo fictício aprovado
  bun run dev                     servidor local
  slash verify --update-baseline  grava as bases visuais e verifica tudo
[saída: 0]

produto

Use produto para software ou serviço com planos mensais e anuais e teste grátis. O destaque da primeira dobra tem dois botões: «Começar teste grátis», que vai ao checkout, e «Falar no WhatsApp».

As seções, na ordem, são Header, Hero, LogoStrip, Features, duas seções FeatureSplit (uma com números, outra com lista), Testimonials, Pricing, Faq e CtaSection. O Pricing deste modelo alterna entre o plano mensal e o anual. O exemplo traz três planos.

Projeto criado em <projeto>.
Próximos passos, dentro da pasta:
  slash check                     confere conteúdo, contraste e SEO
  slash approve                   libera o conteúdo fictício aprovado
  bun run dev                     servidor local
  slash verify --update-baseline  grava as bases visuais e verifica tudo
[saída: 0]

evento

Use evento para um evento com dia, programação, palestrantes, local e ingressos. Os ingressos são os planos de Pricing, e cada um leva ao checkout.

As seções, na ordem, são Header, Hero, LogoStrip, Features, Schedule, Team, Pricing, Locations, Faq e CtaSection.

Projeto criado em <projeto>.
Próximos passos, dentro da pasta:
  slash check                     confere conteúdo, contraste e SEO
  slash approve                   libera o conteúdo fictício aprovado
  bun run dev                     servidor local
  slash verify --update-baseline  grava as bases visuais e verifica tudo
[saída: 0]

lancamento

Use lancamento para um empreendimento na planta. Não há checkout: a venda segue com o corretor. O botão «Receber tabela», no cabeçalho, e o botão «Receber tabela de preços», no hero, levam à seção de reserva. O contato com o corretor sai pelo WhatsApp: no botão «Falar com um corretor» do hero, no cartão de plantas e na faixa final, com «Agendar visita».

As seções, na ordem, são Header (transparente, sobre o hero), Hero com fundo em carrossel, Features, PhotoGallery, duas seções FeatureSplit, Pricing, CtaSection no formato de cartão, Faq e CtaSection na faixa final.

Projeto criado em <projeto>.
Próximos passos, dentro da pasta:
  slash check                     confere conteúdo, contraste e SEO
  slash approve                   libera o conteúdo fictício aprovado
  bun run dev                     servidor local
  slash verify --update-baseline  grava as bases visuais e verifica tudo
[saída: 0]

captura

Use captura para captar contatos, como uma avaliação gratuita ou um pedido de orçamento. A primeira dobra traz um formulário com nome e telefone. Não há checkout nem botão flutuante do WhatsApp. O WhatsApp aparece no botão do cabeçalho e na faixa final. No celular, com o menu funcionando (com JS), o botão do cabeçalho sai da barra, e a faixa final fica como o contato principal. A regra completa, o envio do formulário e o destino dos leads estão em Lead e WhatsApp.

As seções, na ordem, são Header, Hero com formulário, LogoStrip, Features, FeatureSplit, Testimonials, Faq e CtaSection na faixa final.

Projeto criado em <projeto>.
Próximos passos, dentro da pasta:
  slash check                     confere conteúdo, contraste e SEO
  slash approve                   libera o conteúdo fictício aprovado
  bun run dev                     servidor local
  slash verify --update-baseline  grava as bases visuais e verifica tudo
[saída: 0]

Seções

Os nomes das seções levam à página de cada uma: Header, Hero, Features, FeatureSplit, About, Testimonials, Pricing, Faq, CtaSection, LogoStrip, PhotoGallery, Schedule, Team e Locations.