Plantilla web

Hugo Blox - Tailwind

Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included.

La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.

Landing Page · Portfolio · Gratis

Hugo Blox - Tailwind

Páginas

Capturas de la demo, página a página. Desplázate dentro de cada página para verla entera.

/Home | Beacon
Plantilla web Hugo Blox - Tailwind, página /, parte 1Plantilla web Hugo Blox - Tailwind, página /, parte 2Plantilla web Hugo Blox - Tailwind, página /, parte 3Plantilla web Hugo Blox - Tailwind, página /, parte 4Plantilla web Hugo Blox - Tailwind, página /, parte 5Plantilla web Hugo Blox - Tailwind, página /, parte 6
/blog/Blog | Beacon
Plantilla web Hugo Blox - Tailwind, página /blog/, parte 1Plantilla web Hugo Blox - Tailwind, página /blog/, parte 2Plantilla web Hugo Blox - Tailwind, página /blog/, parte 3
/changelog/Changelog | Beacon
Plantilla web Hugo Blox - Tailwind, página /changelog/, parte 1

Análisis del diseño

Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.

Este análisis aún no está disponible en español, así que se muestra en inglés.

Overall

landing page, modern and clean, medium density, light/dark

Palette

background #ffffff; surfaces [#f1f5f9, #0a0e27, #111827, #eef2ff]; text #111827; muted text #4b5563; primary #4f39f6; accents [#155dfc]

Type

headings Montserrat, 700, title case; body Poppins, 18px; scale h1 60px / h2 36px / h3 18px

Shape & spacing

button/card radius 9999px, no borders, subtle shadows, section spacing 80px, content width 768px

Sections (top to bottom)
  • Header — fixed navigation bar with logo, menu items, search, and user icon, white background
  • Hero — full-width gradient background from dark blue to black, centered headline, subheadline, two CTA buttons, rating badge, and logo row
  • Stats — three-column layout on white background with large numbers in purple, descriptive text below
  • Features — two-column layout with left-side large card and right-side smaller cards, white background
  • Comparison table — four-column comparison grid with highlighted column, light gray background
  • Pricing — three-column pricing cards with toggle switch above, white background
  • Product section — image on left, text and CTA on right, light gray background
  • Testimonial section — image on right, text and bullet points on left, light gray background
Signature details
  • Gradient hero background with deep blue to black transition
  • Rounded pill-shaped buttons with sharp corners (9999px radius)
  • Purple accent color used consistently for CTAs and highlights
  • Minimalist card design with soft shadows and no borders
  • Consistent use of Poppins and Montserrat typefaces
  • Clean spacing with generous padding and consistent rhythm
Other pages
  • /blog/: vertical list of blog posts with featured images, tags, author, date, read time, and "Read more" links
  • /changelog/: simple list of version updates with dates, titles, descriptions, and "Read more" links, footer with logo, social icons, and site navigation

Detalles de la plantilla

Categoría
Landing Page, Portfolio, Blog, Agency
Tecnología
Hugo
Licencia
MIT
Autor
George Cushen
Publicada en
Hugo Themes
Precio
Gratis
  • blog
  • company
  • dark
  • landing
  • minimal
  • multilingual
  • portfolio

Diseño original de George Cushen, publicado en Hugo Themes. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.

El briefing del que parte Ottermind

Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.

Build a landing page website inspired by the "Hugo Blox" template. Reference brief: Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included. Style and features to reflect: blog, company, dark, landing, minimal, multilingual. Use original copy and imagery for my brand rather than the reference's placeholder content.

Cómo usar esta plantilla

  1. 1

    Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.

  2. 2

    Añade al briefing tu marca, tu público, las páginas y el contenido.

  3. 3

    Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.