Template de site
Mainline - Modelo de landing page minimalista para Next.js & Astro
Nosso modelo mais popular. Um modelo de landing page minimalista, porém único, construído com shadcn/ui e Tailwind 4. Disponível nas versões Next.js e Astro. Contém todas as páginas e seções principais para uma landing page ou site de marketing.
Landing page · Kit inicial · Grátis
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, limpa e moderna, baixa densidade, clara
- Paleta
fundo #F9F8F6; superfícies #FFFFFF, #F3F4F6; texto #111827; texto suavizado #6B7280; primário #111827; destaques #10B981, #EF4444, #F59E0B, #8B5CF6
- Tipografia
títulos Inter, 700, caixa de frase; corpo Inter, 16px; escala h1 48px, h2 32px, h3 24px
- Forma e espaçamento
raio de botões/cartões 8px, bordas 1px solid #E5E7EB, sombras 0 1px 3px rgba(0,0,0,0.1), espaçamento entre seções 80px, largura do conteúdo 1280px
- Seções (de cima para baixo)
- Cabeçalho — barra de navegação horizontal com logotipo, itens de menu e botão de login, posição fixa, fundo branco com sombra sutil
- Hero — layout em duas colunas, lado esquerdo com título principal, subtítulo e dois botões CTA; lado direito com quatro itens de funcionalidades usando marcadores com ícones, fundo claro
- Pré-visualização do produto — cartão em largura total mostrando mockup da interface de um painel de gerenciamento de tarefas com abas, opções de filtro e cartões de problemas em colunas, superfície branca com borda suave
- Rodapé — não visível na captura de tela
- Detalhes marcantes
- Interface minimalista com espaçamento e alinhamento consistentes
- Cantos arredondados suaves em todos os elementos interativos
- Sombras sutis em cartões e cabeçalho
- Marcadores baseados em ícones para a lista de funcionalidades
- Hierarquia tipográfica limpa com títulos em negrito e texto corporal leve
- Esquema de cores monocromático com cores de destaque estratégicas em botões CTA e indicadores de status
- Outras páginas
- /features: visão geral das capacidades do produto com ícones e descrições
- /pricing: tabela de preços em níveis com comparação de funcionalidades
- /about: equipe e declaração de missão com imagens
- /contact: formulário e informações de contato
Detalhes do template
- Categoria
- Landing page, Kit inicial
- Feito com
- Next.js, Astro, Tailwind CSS, shadcn/ui
- Licença
- Commercial
- Autor
- Shadcnblocks
- Publicado em
- Shadcnblocks
- Preço
- Grátis
Design original de Shadcnblocks, publicado no Shadcnblocks. 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 modelo "Mainline". Brief de referência: Nosso modelo mais popular. Um modelo de landing page minimalista, porém único, construído com shadcn/ui e Tailwind 4. Disponível nas versões Next.js e Astro. Contém todas as páginas e seções principais para uma landing page ou site de marketing. Utilize textos e imagens originais da minha marca em vez do conteúdo placeholder do modelo de 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.
