Sección hero principal con titular grande, subtítulo y botón de acción. Fondo oscuro, tipografía prominente.
Descripción
El Hero simple es la sección de entrada de una página web: el primer bloque que ve el visitante al llegar, y el más importante para captar su atención.
Combina una etiqueta opcional (badge), un título grande, un subtítulo y dos botones de acción, todo centrado sobre un fondo oscuro que da contraste y se ve claro.
El título cambia de tamaño según el ancho de la pantalla usando la función CSS clamp() (que define un tamaño mínimo, uno ideal y uno máximo, y el navegador elige el que corresponde). Así el título nunca se ve ni gigante ni diminuto de más.
El badge es un elemento chiquito arriba del título. Se ve como una píldora semitransparente con el color de acento del proyecto y un borde suave. Sirve para destacar una novedad o categoría. Si no lo necesitás, lo podés borrar del HTML sin que se rompa nada más.
Hay dos botones: uno principal (fondo sólido, con el color de acento) y uno secundario (transparente, con borde suave). Juntos ofrecen una acción principal y una alternativa — un patrón muy común en landing pages.
El contenido del hero no se estira más de 720 píxeles de ancho, y queda centrado tanto horizontal como verticalmente. Esto evita que las líneas de texto queden demasiado largas y difíciles de leer en pantallas anchas.
El espacio de arriba y abajo del hero se controla con una variable CSS (un valor que definís una vez y reutilizás en el archivo), que por defecto es bastante generoso. Podés achicarlo o agrandarlo según cuánto protagonismo quieras darle a esta sección.
El subtítulo es más angosto que el título (máximo 480 píxeles), para que el título sea lo que más llame la atención y el subtítulo solo lo acompañe sin competir.
Todos los colores están guardados en variables CSS: el fondo, el color del texto, el color apagado y el color de acento. Cambiando esas cuatro variables podés armar, por ejemplo, una versión con fondo claro.
En celulares de hasta 640 píxeles de ancho, el espacio de arriba y abajo se achica un poco, y los dos botones pasan a ocupar todo el ancho, uno debajo del otro, para que sean más fáciles de tocar con el dedo.
El componente no trae imágenes de fondo, degradados complicados ni animaciones con JavaScript — es CSS puro y simple. Si querés agregar un degradado o una foto de fondo, podés hacerlo cambiando el `background` sin que rompa el resto de las reglas.
Este hero sirve como punto de partida para cualquier landing: producto, startup, portfolio, servicio o evento. Su diseño oscuro y simple se adapta fácil con cambios chicos en las variables de color.
Como es un bloque independiente, se puede combinar con otros módulos de Kodeval Pages: un header arriba, una sección de features debajo, y un footer al final — armás una landing completa sin frameworks.
Para usar este módulo, pegá el HTML donde quieras que aparezca (normalmente arriba de todo, después del header) y el CSS dentro de tu archivo de estilos (o en un <style> en el head). También necesitás `base.css`, `fonts.css` y `layout.css` del proyecto para que se vea igual que en el ejemplo.
<section class="hero">
<div class="hero-inner">
<span class="hero-badge">Novedad</span>
<h1 class="hero-title">
Construí algo<br>que valga la pena.
</h1>
<p class="hero-sub">
Una descripción corta y directa de qué hace tu producto
o proyecto. Dos o tres líneas como máximo.
</p>
<div class="hero-actions">
<a href="#" class="btn-primary">Empezar gratis →</a>
<a href="#" class="btn-outline">Ver demo</a>
</div>
</div>
</section>
/*
|--------------------------------------------------------------------------
| Hero Simple — Kodeval Pages
|--------------------------------------------------------------------------
| Sección hero con badge, título grande, subtítulo y dos botones.
| Fondo oscuro con texto claro. Sin dependencias externas.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
===================== */
.hero {
--hero-bg: #0f172a;
--hero-text: #f8fafc;
--hero-muted: #94a3b8;
--hero-accent: #5865f2;
--hero-pad-v: 7rem;
}
/* =====================
SECCIÓN PRINCIPAL
min-height:100vh hace que ocupe toda la pantalla.
Podés cambiarlo a un valor fijo como 600px.
===================== */
.hero {
background: var(--hero-bg);
padding: var(--hero-pad-v) 2rem;
display: flex;
align-items: center;
}
/* =====================
CONTENEDOR INTERNO
max-width centra el contenido y limita el ancho.
===================== */
.hero-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
/* =====================
BADGE — etiqueta pequeña sobre el título
Quitala si no la necesitás.
===================== */
.hero-badge {
display: inline-block;
background: rgba(88,101,242,0.15);
color: var(--hero-accent);
border: 1px solid rgba(88,101,242,0.3);
border-radius: 100px;
padding: 0.3rem 0.9rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
}
/* =====================
TÍTULO PRINCIPAL
clamp() escala el tamaño entre pantallas chicas y grandes:
mínimo 2.4rem → máximo 4.5rem según el ancho de pantalla.
===================== */
.hero-title {
font-size: clamp(2.4rem, 6vw, 4.5rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--hero-text);
margin: 0;
}
/* =====================
SUBTÍTULO
===================== */
.hero-sub {
font-size: 1.1rem;
color: var(--hero-muted);
line-height: 1.7;
max-width: 480px;
margin: 0;
}
/* =====================
BOTONES
===================== */
.hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.btn-primary {
background: var(--hero-accent);
color: #fff;
padding: 0.85rem 1.75rem;
border-radius: 10px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-outline {
background: transparent;
color: var(--hero-text);
border: 1px solid rgba(255,255,255,0.15);
padding: 0.85rem 1.75rem;
border-radius: 10px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: border-color 0.15s, background 0.15s;
}
.btn-outline:hover {
border-color: rgba(255,255,255,0.35);
background: rgba(255,255,255,0.04);
}
/* =====================
RESPONSIVE
===================== */
@media (max-width: 640px) {
.hero { padding: 5rem 1.5rem; }
.hero-actions { flex-direction: column; width: 100%; }
.btn-primary,
.btn-outline { text-align: center; }
}