01. Tipografía y Encabezados
H1: El encabezado principal del sitio (6xl-7xl)
Este es un párrafo destacado (text-xl) que suele acompañar al H1 en el Hero para dar contexto al usuario.
H2: Encabezado de sección (3xl-4xl)
Este es el párrafo estándar del sitio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
H3: Encabezado de subsección o tarjeta (xl-2xl)
Este es un párrafo pequeño (text-sm), ideal para notas al pie, descripciones secundarias o metadatos.
02. Botones y Acciones
03. Listas y Elementos
Lista Desordenada (Estándar)
- Primer elemento de la lista lorem ipsum
- Segundo elemento con más texto para ver el salto de línea automático en el diseño
- Tercer elemento final
Lista de Características (Iconos)
- Característica positiva con icono de verificación
- Aviso importante o alerta secundaria
- Acción rápida o ventaja competitiva
04. Tarjetas y Contenedores
Seguridad
Ejemplo de tarjeta de característica con fondo suave y sombreado sutil al pasar el ratón.
Estructura
Tarjeta con borde definido y fondo blanco, ideal para cuadrículas de servicios o planes.
Desarrollo
Variante de alto contraste diseñada para destacar secciones críticas o elementos premium.
05. Imágenes y Layout Mixto
Imagen con texto a la derecha
Ejemplo simplificado de una sección con imagen estática en /public/site-assets/. Ideal para secciones de características o "About Us".
- Ubicación: /public/site-assets/
- Componente: next/image