Template de site
Relative - Template de landing page Next.js & Astro
Um template de landing page criado com shadcn/ui e Tailwind. Disponível nas versões Next.js e Astro. Perfeito para lançar rapidamente um site de marketing com seções essenciais.
Landing page · 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 #f9fafb; superfícies #ffffff, #f3f4f6; texto #111827; texto suavizado #6b7280; primário #111827; destaques #000000, #10b981, #f59e0b
- Tipografia
títulos Inter, 700, caixa de frase; corpo Inter, 14px; escala h1 64px, h2 40px, h3 24px
- Forma e espaçamento
raio de botões/cartões 6px, 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 — navegação horizontal com logotipo à esquerda, links centralizados e botões de login/cadastro à direita, fundo branco
- Hero — seção em largura total com título grande centralizado, subtítulo abaixo e botão "Comece agora" logo abaixo, fundo texturizado cinza-claro nas laterais
- Demonstração do produto — mockup de interface embutida mostrando painel de gerenciamento de tarefas com abas, colunas de status e cartões com imagens e metadados, fundo branco com borda sutil
- Rodapé — não visível na captura de tela
- Detalhes marcantes
- Interface minimalista com tipografia de alto contraste preto sobre branco
- Textura diagonal sutil nos painéis laterais da seção hero
- Layout de cartões de tarefa com espaçamento consistente e cantos arredondados
- Indicadores de status usando pontos coloridos (vermelho, amarelo, azul, verde)
- Iconografia limpa para ações e filtros
- Botão flutuante de ação ("Nova tarefa") com símbolo de adição
- Outras páginas
- /features: visão geral das funcionalidades do produto
- /about-us: informações sobre a empresa
- /pricing: planos de precificação em camadas
- /faq: perguntas frequentes
- /contacts: formulário de contato e dados
Detalhes do template
- Categoria
- Landing page
- 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 template "Relative". Briefing de referência: Um template de landing page criado com shadcn/ui e Tailwind. Disponível nas versões Next.js e Astro. Perfeito para lançar rapidamente um site de marketing com seções essenciais. Use textos e imagens originais para minha marca em vez do conteúdo de 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.
