Template de site
Vetra
Landing page animada para uma plataforma de automação de marketing com IA, construída com Next.js, Tailwind CSS e Framer Motion.
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, futurista, alta densidade, escura
- Paleta
fundo #09090b; superfícies [#2563eb, #fafafa, #3b82f6, #0ea5e9]; texto #fafafa; texto abafado #a3a3a3; primário #3b82f6; destaques [#2563eb, #0ea5e9]
- Tipografia
títulos heading, 700, caixa de frase; corpo heading, 18px; escala h1 72px / h2 48px / h3 20px
- Forma e espaçamento
raio do botão 7.6px, raio do cartão 24px, sem bordas, sombras suaves, espaçamento entre seções 120px, largura do conteúdo 1152px
- Seções (de cima para baixo)
- Hero — largura total, manchete centralizada com dois botões CTA, fundo em gradiente escuro com sobreposição circular sutil, mockup de dashboard flutuante abaixo
- Marcas confiáveis — linha de logotipos centralizada, seguida por grade de recursos com 5 cartões em 2 linhas (3+2), cada um com ícone, título, subtítulo e elemento de UI ilustrativo
- Pré-visualização do dashboard — dois cartões de dados lado a lado (Insights de Campanha, Métricas de Público), seguidos por Integração com Redes Sociais com logotipo central e ícones sociais radiais
- Preços — dois cartões de planos (Standard, Mastermind) com alternador para cobrança, seguidos por grade de suporte linguístico com bandeiras e nomes
- Rodapé — não visível nas capturas de tela
- Detalhes marcantes
- Mockup de UI de dashboard flutuante com controles no estilo macOS
- Pulsação radial animada ao redor do ícone central de integração social
- Brilho sutil em elementos interativos como botões e estados de passagem do mouse
- Uso consistente de gradientes de destaque roxo-azul em gráficos e destaques
- Design minimalista de cartões com cantos arredondados e sombras internas suaves
- Microinterações implícitas por meio de estados de passagem do mouse e transições animadas
- Outras páginas
- /pricing: tabela comparativa de preços com recursos por nível
- /features: detalhamento completo dos recursos com ilustrações
- /blog: lista de artigos com miniaturas e metadados
- /contact: formulário com campos de entrada e botão de envio
Detalhes do template
- Categoria
- Landing page, SaaS, IA
- Autor
- larsen66
- Publicado em
- 21st.dev
- Preço
- Grátis
- Landing Page
- AI
- SaaS
Design original de larsen66, 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 "Vetra". Brief de referência: Landing page animada para uma plataforma de automação de marketing com IA, construída com Next.js, Tailwind CSS e Framer Motion. Use copy e imagens originais da 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.
