Template de site
Hugo Blox - Tailwind
Crie qualquer tipo de site com widgets totalmente personalizáveis - mais de 50 temas de cores claro/escuro, pacotes de idioma e widgets incluídos.
Landing page · Portfólio · 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, moderna e limpa, densidade média, clara/escura
- Paleta
fundo #ffffff; superfícies [#f1f5f9, #0a0e27, #111827, #eef2ff]; texto #111827; texto suavizado #4b5563; primária #4f39f6; acentos [#155dfc]
- Tipografia
títulos Montserrat, 700, caixa de título; corpo Poppins, 18px; escala h1 60px / h2 36px / h3 18px
- Forma e espaçamento
raio de botões/cartões 9999px, sem bordas, sombras sutis, espaçamento entre seções 80px, largura do conteúdo 768px
- Seções (de cima para baixo)
- Cabeçalho — barra de navegação fixa com logotipo, itens de menu, campo de busca e ícone de usuário, fundo branco
- Hero — fundo em gradiente de largura total, indo do azul escuro ao preto, manchete centralizada, subtítulo, dois botões CTA, selo de avaliação e linha de logotipos
- Estatísticas — layout em três colunas sobre fundo branco com números grandes em roxo e texto descritivo abaixo
- Recursos — layout em duas colunas com um cartão grande no lado esquerdo e cartões menores no lado direito, fundo branco
- Tabela de comparação — grade de comparação em quatro colunas com coluna destacada, fundo cinza claro
- Preços — cartões de preços em três colunas com interruptor acima, fundo branco
- Seção do produto — imagem à esquerda, texto e CTA à direita, fundo cinza claro
- Seção de depoimentos — imagem à direita, texto e marcadores à esquerda, fundo cinza claro
- Detalhes marcantes
- Fundo em gradiente na seção hero com transição do azul profundo ao preto
- Botões arredondados em formato de pílula com cantos afiados (raio de 9999px)
- Cor de acento roxa usada de forma consistente para CTAs e destaques
- Design minimalista de cartões com sombras suaves e sem bordas
- Uso consistente das fontes Poppins e Montserrat
- Espaçamento limpo com preenchimento generoso e ritmo consistente
- Outras páginas
- /blog/: lista vertical de postagens de blog com imagens em destaque, tags, autor, data e tempo de leitura, além de links "Leia mais"
- /changelog/: lista simples de atualizações de versão com datas, títulos, descrições e links "Leia mais", rodapé com logotipo, ícones sociais e navegação do site
Detalhes do template
- Categoria
- Landing page, Portfólio, Blog, Agência
- Feito com
- Hugo
- Licença
- MIT
- Autor
- George Cushen
- Publicado em
- Hugo Themes
- Preço
- Grátis
- blog
- company
- dark
- landing
- minimal
- multilingual
- portfolio
Design original de George Cushen, publicado no Hugo Themes. 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 "Hugo Blox". Briefing de referência: Crie qualquer tipo de site com widgets totalmente personalizáveis - mais de 50 temas de cores claro/escuro, pacotes de idioma e widgets incluídos. Estilos e funcionalidades a refletir: blog, empresa, escuro, landing, minimalista, multilíngue. Use textos e imagens originais para minha marca em vez do conteúdo 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.
