En esta clase, veremos cómo construir la sección de "Inspiración para futuras escapadas", una parte interactiva y dinámica de nuestra página. Analizaremos la estructura base de esta sección, que incluye un título, una lista de destinos y una funcionalidad para "mostrar más" opciones.

Estructura y diseño inicial

Comenzaremos definiendo un contenedor principal para la sección. Este contenedor tendrá un espaciado (padding) específico para asegurar una correcta alineación y separación del resto del contenido. Dentro de este, ubicaremos un encabezado H2 con el texto "Inspiración para futuras escapadas". Este título tendrá un estilo predefinido en cuanto a peso de fuente y tamaño, además de un margen inferior para separarlo de los elementos subsiguientes.

Listado de escapadas y funcionalidad "Mostrar más"

A continuación, implementaremos una lista de escapadas. Para mantener nuestro código limpio y modular, utilizaremos una variable que contenga los datos de cada escapada (título y texto). Esta lista se mostrará en un formato de dos columnas utilizando una cuadrícula.

Incorporaremos la funcionalidad de "mostrar más" para ocultar inicialmente algunas escapadas y revelarlas al hacer clic. Para esto, utilizaremos una lógica que controle la visibilidad de los elementos adicionales. El botón "mostrar más" incluirá un icono para mejorar la experiencia del usuario. Además, aseguraremos que este botón desaparezca una vez que todas las escapadas estén visibles, imitando el comportamiento de plataformas como Airbnb.

Filtros de escapadas

Finalmente, integraremos una sección de filtros, similar a otras secciones que ya hemos construido. Esta sección contendrá una lista de botones que actuarán como filtros por tipo de escapada (por ejemplo, "más buscados", "ciudades", "playas con historia"). Estos filtros serán estilizados para adaptarse al diseño general de la página, sin incluir imágenes, y permitirán al usuario refinar su búsqueda de inspiración.

Veremos cómo ajustar los márgenes y espaciados para lograr una presentación visualmente coherente y cómo asegurar que estos elementos respondan correctamente a la interacción del usuario.

En futuras clases, exploraremos cómo adaptar el diseño de esta sección para diferentes tamaños de pantalla, como tabletas y escritorios, garantizando una experiencia de usuario óptima en cualquier dispositivo.