Diseñar la sección principal de una landing page exige combinar HTML semántico, variables de SAS y propiedades de Flexbox para lograr un layout responsivo y limpio. Aquí construyes paso a paso la sección hero de Eco Store con un H1, un párrafo, un botón call to action y una imagen, replicando el diseño de Figma.

Cómo se estructura la sección principal en HTML

La base de esta sección es una etiqueta article que contiene dos div: uno con el texto y el botón, y otro con la imagen. Esta separación te permite aplicar Flexbox al contenedor padre y distribuir el espacio en horizontal [01:30].

Dentro del primer div colocas el H1 con el texto impacto tecnológico, un párrafo explicativo y el botón. En el segundo div, llamado image-section, va la imagen principal que vive en la carpeta assets/img.

¿Qué etiqueta HTML conviene usar para una sección hero? La etiqueta article funciona bien cuando el bloque tiene contenido autónomo como título, descripción y llamado a la acción. Aporta semántica y mejora la accesibilidad.

Cómo aplicar saltos de línea controlados con BR

Para respetar el diseño de Figma necesitas cortar el párrafo en puntos específicos. La etiqueta <br> inserta un salto de línea exacto donde lo coloques, sin depender del ancho del contenedor [08:45]. Úsala con moderación: solo cuando el diseño lo pida.

Cómo dividir el layout al 50% con Flexbox

El diseño marca dos columnas iguales: texto a la izquierda, imagen a la derecha. Para lograrlo aplicas display: flex al article y un width: 50% a cada div interno [03:20].

• El contenedor padre recibe display: flex para alinear los hijos en horizontal.
• Cada hijo toma width: 50% para repartir el espacio.
• La propiedad justify-content: space-between separa los bloques hacia los extremos.

Cuando defines anchos fijos en los hijos, space-between deja de tener efecto visual porque no queda espacio libre. Si quitas los anchos, los bloques crecen según su contenido y la distribución cambia.

Por qué usar vw en imágenes responsivas

La unidad vw (view width) escala la imagen en proporción al ancho de la pantalla. Esto facilita el comportamiento responsivo sin recalcular medidas en cada breakpoint [06:15]. Combinar vw con un border-radius de 19 píxeles, según el valor exacto de Figma, mantiene la consistencia visual.

Cómo simplificar estilos con variables y nesting en SAS

Una de las ventajas de SAS es declarar variables globales para colores y tamaños recurrentes. Cuando notas que un valor como 1.5em aparece en varios paragraphs, lo conviertes en variable [10:30].

scss $paragraph-size: 1.5em; $quaternary-color: #color;

article { color: $primary-text-color; display: flex; padding-left: 45px; padding-right: 45px;

p { font-size: $paragraph-size; }

button { background-color: $quaternary-color; border-style: none; border-radius: 35px; padding: 20px; color: white; font-size: 1em; } }

El nesting te permite anidar selectores dentro del article sin repetir el nombre del padre. Si dos elementos comparten estilos, llamas la etiqueta directamente (div, p, button) en lugar de crear clases nuevas.

¿Cuándo conviene crear una variable en SAS? Cuando el mismo valor aparece dos o más veces. Convertirlo en variable global facilita cambios futuros y reduce errores de inconsistencia.

Cómo dar forma al botón call to action

El botón necesita varios estilos combinados para verse como una cápsula:

• background-color con la variable $quaternary-color.
• border-style: none para quitar el borde nativo.
• border-radius: 35px para el efecto cápsula.
• padding: 20px para que crezca alrededor del texto.
• width: 12vw pensando en responsive.
• color: white y font-size: 1em para legibilidad.

Cómo ajustar espaciados con gap, padding y margin

El espacio entre el H1, el párrafo y el botón se controla con gap aplicado al contenedor que los agrupa, no al article completo [15:40]. Para eso creas la clase impact-section con display: flex y flex-direction: column.

Los elementos nativos como H1 traen margin y padding por defecto. Si no los reseteas, generan separaciones inesperadas. Aplica padding: 0 y margin: 0 para tener control total.

• gap: 25px separa H1, párrafo y botón sin pegarlos.
• padding-top: 50px aleja la sección de la navbar.
• padding-left y padding-right de 45 píxeles alinean con la navbar superior.

Diferencia entre space-between, space-around y space-evenly

Estas tres propiedades de justify-content distribuyen el espacio sobrante entre elementos flex, pero lo hacen distinto:

• space-between: pega el primer y último elemento a los bordes.
• space-around: deja espacio igual alrededor de cada elemento.
• space-evenly: distribuye el mismo espacio entre todos los huecos.

Para esta sección hero, space-between funciona mejor porque mantiene el texto alineado a la izquierda y la imagen pegada a la derecha, replicando el diseño de Figma.

¿Cómo resolverías tú el espaciado entre la navbar y la sección hero? Cuéntame en los comentarios qué propiedad de Flexbox te parece más útil cuando construyes layouts de dos columnas.