Template de site
SaaS Landing Template
Página de landing SaaS em Next.js, shadcn/ui e Tailwind v4, com preços, grade de funcionalidades e tema escuro pronto para usar.
Landing page · SaaS · Grátis
Páginas
Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.
Análise do design
Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.
- Visão geral
Página inicial de SaaS, moderna e elegante, densidade média, escura
- Paleta
fundo #0a0a0a; superfícies [#171717, #016fee, #e5e5e5]; texto #fafafa; texto abafado #a1a1a1; primário #016fee; destaques [#016fee]
- Tipografia
títulos Geist, 500, caixa de frase; corpo Geist, 18px; escala h1 60px / h2 24px / h3 20px
- Forma e espaçamento
raio de botão/cartão 8px / 14px, sem bordas, sombra rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, espaçamento entre seções 120px, largura do conteúdo 1152px
- Seções (de cima para baixo)
- Cabeçalho — navegação horizontal com logotipo, links, menu suspenso, botão CTA e ícone social; fundo escuro
- Hero — título centralizado, subtítulo, botão "Veja mais"; brilho radial azul sutil atrás do texto
- Parceiros — linha de cinco logotipos de marcas em fundo escuro
- Depoimentos — seis cartões em duas linhas de três, cada um com classificação por estrelas, citação, nome, cargo e avatar; cantos arredondados, sombra leve
- Estatísticas — quatro métricas em uma linha: "Mais de 50K usuários ativos", "99,9% de tempo de atividade", etc.; texto branco sobre fundo escuro
- Preços — três cartões de planos (Hobby, Pro, Enterprise), com destaque para Pro usando borda e selo "Mais popular"; níveis de preços com marcações de verificação e CTAs
- Perguntas frequentes — lista expansível com quatro perguntas, setas para baixo para alternância
- Rodapé — logotipo, frase de impacto, links rápidos, ícones sociais, direitos autorais, hashtag
- Detalhes marcantes
- Brilho radial azul atrás do texto da seção hero
- Formas de cartão arredondadas com sombras suaves
- Uso consistente da família de fontes Geist em todo o texto
- Efeitos de passagem do mouse sutis em botões e cartões
- Espaçamento e alinhamento limpos usando largura de conteúdo de 1152px
- Cor de destaque (#016fee) usada para destaques e elementos interativos
- Outras páginas
- /pricing: Seção de preços com planos escalonados e recursos
- /testimonials: Grade de depoimentos com citações e avaliações de usuários
Detalhes do template
- Categoria
- Landing page, SaaS
- Autor
- gonzalochale
- Publicado em
- 21st.dev
- Preço
- Grátis
- Landing Page
- SaaS
Design original de gonzalochale, publicado no 21st.dev. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.
O briefing de onde o Ottermind parte
Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.
Crie um site de landing page inspirado no template "SaaS Landing Template". Briefing de referência: Página de landing SaaS em Next.js, shadcn/ui e Tailwind v4, com preços, grade de funcionalidades e tema escuro pronto para usar. Use textos e imagens originais para minha marca em vez do conteúdo placeholder da referência.
Como usar este template
- 1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
- 2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
- 3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.
