Template de site

congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS

Um tema poderoso e leve para Hugo construído com Tailwind CSS.

Portfólio · Blog · Grátis

congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS

Páginas

Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.

/congo/Congo
Template de site congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS, página /congo/, parte 1
/congo/docs/Documentation · Congo
Template de site congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS, página /congo/docs/, parte 1Template de site congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS, página /congo/docs/, parte 2
/congo/samples/Content Samples · Congo
Template de site congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS, página /congo/samples/, parte 1
/congo/users/Users · Congo
Template de site congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS, página /congo/users/, parte 1Template de site congo - Um tema poderoso e leve para Hugo construído com Tailwind CSS, página /congo/users/, parte 2

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

blog, limpo, minimalista, claro

Paleta

fundo #ffffff; superfícies [#ede9fe, #ddd6fe, #7c3aed]; texto #27272a; texto suavizado #3f3f46; primário #7c3aed; destaques []

Tipografia

títulos ui-sans-serif, 800, caixa de frase; corpo ui-sans-serif, 16px; escala h1 36px / h2 24px / h3 20px

Forma e espaçamento

raio de botão/cartão 6px, sem bordas, sombras suaves em cartões, espaçamento entre seções 4rem, largura do conteúdo 1024px

Seções (de cima para baixo)
  • Cabeçalho — navegação horizontal com logotipo, links, campo de busca e alternador de idioma; fundo branco
  • Hero — título centralizado com emoji, subtítulo, parágrafo e barra de alerta roxa com botão CTA; ilustração em largura total abaixo
  • Bloco de conteúdo — layout de duas colunas com lista de páginas de exemplo; miniaturas alinhadas à esquerda, texto alinhado à direita com metadados
  • Artigos recentes/Exemplos de conteúdo — lista vertical de artigos com miniaturas, títulos, datas, tempo de leitura e resumos; cada item possui um pequeno ícone de seta para cima no extremo direito
  • Rodapé — texto de direitos autorais e atribuição centralizados em fonte pequena
Detalhes marcantes
  • Ilustração abstrata de árvore roxa com fogos de artifício acima
  • Uso consistente da cor de destaque roxa (#7c3aed) para links, botões e destaques
  • Design minimalista de cartões com sombras sutis
  • Pequenos ícones de seta para cima ao lado das listas de artigos
  • Tipografia limpa com espaçamento e alinhamento consistentes
  • Uso de emojis em títulos e conteúdo
Outras páginas
  • /congo/docs/: página de documentação com grande imagem hero de dispositivos, seguida por uma lista de seções com ícones ilustrativos e breves descrições
  • /congo/samples/: layout idêntico ao da página inicial, mas com lista estendida de tipos de conteúdo, incluindo gráficos, diagramas e artigos externos

Detalhes do template

Categoria
Portfólio, Blog, Kit inicial
Feito com
Hugo
Licença
MIT
Autor
James Panther
Publicado em
Hugo Themes
Preço
Grátis
  • blog
  • dark
  • dark-mode
  • light
  • minimal
  • personal
  • tailwind

Design original de James Panther, 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.

Construa um site de portfólio inspirado no template "congo". Briefing de referência: Um tema poderoso e leve para Hugo construído com Tailwind CSS. Estilo e funcionalidades a refletir: blog, escuro, modo escuro, claro, minimalista, pessoal. Use texto e imagens originais para minha marca em vez do conteúdo placeholder da referência.

Como usar este template

  1. 1

    Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.

  2. 2

    Acrescente ao briefing sua marca, público, páginas e conteúdo.

  3. 3

    O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.