Template de site
WriteMate AI
Um modelo de marketing de produto de IA da TailGrids construído em React e Tailwind CSS. Projetado para promover uma ferramenta de escrita com IA com seções de funcionalidades e preços.
Landing page · IA · 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 de destino, tecnologia moderna, densidade média, escura
- Paleta
fundo #030303; superfícies [#ffffff]; texto #ffffff; texto suavizado #9f9fa9; primário #ffffff; acentos []
- Tipografia
títulos Inter, 400, caixa de frase; corpo Inter, 16px; escala h1 60px / h2 36px / h3 24px
- Forma e espaçamento
raio de botões/cartões 0; bordas 1px solid #1a1a1a; sombras nenhuma; espaçamento entre seções 80px; largura do conteúdo 1232px
- Seções (de cima para baixo)
- Cabeçalho — navegação horizontal com logotipo, links, login e CTA "Comece gratuitamente"; fundo preto
- Hero — fundo em gradiente de largura total (azul para roxo), título centralizado, subtítulo, campo de entrada com ícone de upload
- Confiado por — linha horizontal de logotipos (Udeck, FormBold) sobre fundo preto
- O que você obtém — grade de quatro colunas de cartões de recursos com ícones, títulos, descrições e botões "Experimente agora"
- Casos de uso — grade de seis colunas de cartões de casos de uso com título e descrição
- Planos e preços — cartões de preços em três colunas com nomes de planos, preços, recursos e CTAs; selo "Mais popular" no cartão do meio
- Depoimentos da comunidade — grade de duas linhas de cartões de usuários com avatar, nome, identificador e citação
- Perguntas frequentes — layout de duas colunas com perguntas em estilo acordeão à direita e texto introdutório à esquerda
- Chamada para ação — fundo em gradiente, título, subtítulo e dois botões CTA
- Rodapé — rodapé de quatro colunas com links de Produto, Recursos, Empresa e Jurídico, direitos autorais e links de políticas
- Detalhes marcantes
- Fundos em gradiente nas seções hero e preços
- Contraste minimalista branco sobre preto
- Uso consistente de cantos arredondados em cartões e botões
- Carrossel horizontal de logotipos sob "Confiado por"
- FAQ em estilo acordeão com setas para baixo
- Tipografia limpa e bem espaçada com altura de linha consistente
- Outras páginas
- /pricing: seção de preços repetida com layout diferente e níveis adicionais de planos
- /docs: navegação lateral com conteúdo de documentação, layout de prosa limpo
Detalhes do template
- Categoria
- Landing page, IA
- Autor
- tailgrids
- Publicado em
- 21st.dev
- Preço
- Grátis
- Landing Page
- AI
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.
Construa um site de landing page inspirado no template "WriteMate AI". Resumo de referência: Um modelo de marketing de produto de IA da TailGrids construído em React e Tailwind CSS. Projetado para promover uma ferramenta de escrita com IA com seções de funcionalidades e preços. Use textos e imagens originais para minha marca em vez do conteúdo placeholder do 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.
