Template de site
Sonic - Página de destino para um único produto
Um modelo moderno de página de destino para um único produto, desenvolvido com shadcn/ui e Tailwind. Disponível nas versões Next.js e Astro. Ideal para vender ou divulgar um produto físico ou digital.
Landing page · E-commerce · 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, minimalista, baixa densidade, clara
- Paleta
fundo #FFFFFF; superfícies #FFFFFF, #F9FAFB; texto #111827; texto suavizado #6B7280; primário #111827; destaques #00FFA3, #1F2937
- Tipografia
títulos Inter, 700, caixa de título; corpo Inter, 16px; escala h1 52px, h2 40px, h3 28px
- Forma e espaçamento
raio do botão 9999px, raio do cartão 0px, bordas nenhuma, sombras queda suave (0 10px 15px rgba(0,0,0,0.1)), espaçamento entre seções 120px, largura do conteúdo 1200px
- Seções (de cima para baixo)
- Cabeçalho — layout horizontal, logotipo à esquerda, navegação ao centro, CTA à direita, fundo branco
- Hero — largura total, texto e imagem do produto centralizados, título acima da subtítulo, dois botões "Comprar agora" (um em cápsula escura, outro contornado), imagem do produto abaixo com faixa verde de destaque
- Imagem do produto — recorte vertical grande de dispositivo cilíndrico, base em malha preta, faixa verde luminosa, grade superior do alto-falante visível
- Detalhes marcantes
- Tipografia limpa e de alto contraste com espaçamento generoso
- Foco único no produto, com mínimas distrações
- Cor verde vibrante como destaque em paleta monocromática
- Sombra queda suave sob o produto para profundidade
- CTAs em formato de cápsula arredondada com seta direcional
- Composição centralizada e simétrica em toda a página
- Outras páginas
- /product: detalhes do produto com especificações e imagens
- /specifications: dados técnicos em formato de grid
- /about: história da marca com foto da equipe
- /pricing: planos escalonados com tabela de comparação
- /contact: formulário com mapa e links sociais
Detalhes do template
- Categoria
- Landing page, E-commerce
- 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.
Construa uma página de destino inspirada no modelo "Sonic". Briefing de referência: Um modelo moderno de página de destino para um único produto, desenvolvido com shadcn/ui e Tailwind. Disponível nas versões Next.js e Astro. Ideal para vender ou divulgar um produto físico ou digital. Use os textos e imagens originais da minha marca, não o conteúdo de preenchimento do modelo.
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.
