Template de site
SaaSly
Um template de marketing SaaS da TailGrids, construído com React e Tailwind CSS. Oferece seções de hero, funcionalidades, preços e depoimentos para um site de produto de software.
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, clima limpo e profissional, densidade média, claro
- Paleta
fundo #ffffff; superfícies [#615fff, #e5e7eb, #030712, #99a1af]; texto #101828; texto abafado #6a7282; primário #615fff; acentos []
- Tipografia
títulos Geist, 600, caixa de frase; corpo Geist, 14px; escala h1 60px / h2 48px / h3 20px
- Forma e espaçamento
raio do botão 8px, raio do cartão 16px, sem bordas, sombra rgb(244, 244, 244) 0px 2px 35.8px 0px, espaçamento entre seções 80px, largura do conteúdo 864px
- Seções (de cima para baixo)
- Cabeçalho — navegação horizontal com logotipo, itens de menu, botões de login e CTA, fundo branco
- Hero — fundo em gradiente céu em largura total, título centralizado, subtítulo, dois botões CTA, mockup do painel abaixo
- Selos de confiança — linha de logotipos de parceiros em fundo branco
- Recursos — layout em três colunas com cartões mostrando análise, gerenciamento de usuários e insights de pedidos, cada um com ícone, título e descrição
- Casos de uso — texto alinhado à esquerda com lista vertical de casos de uso, mockup da barra lateral do painel alinhado à direita
- Integrações — fundo céu em largura total, título centralizado, grade de ícones de ferramentas
- Depoimentos — grade de cinco cartões com imagens de perfil, avaliações por estrelas, depoimentos e nomes
- Preços — cartões de planos em quatro colunas com níveis de preços, recursos e botões CTA, alternador entre mensal/anual
- Perguntas frequentes — layout em duas colunas com perguntas no estilo acordeão e caixa de contato de suporte
- Rodapé — fundo azul escuro, logotipo, frase de impacto, mapa do site, links sociais, direitos autorais
- Detalhes marcantes
- Fundos em gradiente céu nas seções hero e integrações
- Mockups da interface do painel com sombras suaves e cantos arredondados
- Uso consistente da cor primária roxa (#615fff) para CTAs e destaques
- Layouts baseados em cartões limpos com elevação sutil
- Cantos arredondados em todos os elementos interativos
- Tipografia minimalista com espaçamento consistente
- Outras páginas
- /pricing: Seção de preços com tabela de comparação de planos
- /about: Seção sobre nós com fotos da equipe, declaração de missão e narrativa da história
Detalhes do template
- Categoria
- Landing page, SaaS
- Autor
- tailgrids
- Publicado em
- 21st.dev
- Preço
- Grátis
- Landing Page
- SaaS
Design original de tailgrids, 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 "SaaSly". Resumo de referência: Um template de marketing SaaS da TailGrids, construído com React e Tailwind CSS. Oferece seções de hero, funcionalidades, preços e depoimentos para um site de produto de software. Use copy 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.
