Bienvenidos a esta clase, en la que nos vamos a centrar en la parte de cursos.

En esta clase, nos enfocaremos en crear la estructura previa que utilizaremos en una siguiente clase. Primero, abordaremos la creación de un modal y, en otra clase, veremos cómo crear las pestañas.

Es importante destacar que no entraremos en detalles sobre los slides, ya que esa parte sería más apropiada para un curso de AlpineJS avanzado.

Creación de la estructura

1. Primero, vamos a duplicar un archivo en nuestra carpeta de PHP store y lo renombramos a cursos.
2. Crearemos un archivo en la carpeta de componentes y lo llamaremos cursos.p.

Una vez hecho esto, iremos a nuestra web y veremos la sección de cursos que queremos replicar. La estructura básica que necesitamos crear consiste en:

• Un contenedor principal.
• Un título y una descripción.
• Pestañas.
• Un cuadrado con un título, descripción, botón y, finalmente, los cursos.

Contenedor principal

Dentro del contenedor, añadimos:

• Un <h2> para el título principal.
• Una <p> o un <h3> para una sub-descripción.

Pestañas y contenido

Después de las pestañas, comenzaremos a trabajar en el contenido:

• Añadiremos bordes con border y el color border-gray.
• Luego aplicamos un poco de padding con p-4 y ajustamos la estructura.

Títulos y descripciones

Para los títulos dentro del contenido:

• Usamos un <h3> para los sub-títulos.
• Añadimos una <p> para la descripción.

Botón de acción

Añadimos un botón de tipo enlace con la clase border para darle el estilo adecuado y un texto de "Explorar".

Estructura de los cursos

A continuación, creamos un contenedor para los cursos. Este será un contenedor en grid con 5 columnas y un gap de 4. Dentro de cada curso tendremos:

• Una imagen representativa.
• Un título.
• El nombre del profesor oponente.
• Las valoraciones del curso.
• El precio del curso.

Valoraciones y detalles adicionales

Para las valoraciones, utilizamos un d-flex con un pequeño gap y luego aplicamos el número de estudiantes. Esto será mostrado con una valoración de 4.6 y el número de estudiantes será 20,004.

Finalización de la estructura

Una vez completados los elementos básicos, vamos a centrarnos en:

• Añadir márgenes adecuados a cada bloque de contenido.
• Asegurarnos de que las tipografías se apliquen correctamente, especialmente para los títulos.

Ajustes finales

En cuanto a la tipografía:

• Usamos una fuente font-family adecuada y ajustamos el tamaño de texto.
• Para las valoraciones, aplicamos un estilo de text-sm para hacerlas más pequeñas.

Finalmente, nos aseguramos de que la estructura sea consistente y funcional.

Próximos pasos

En la siguiente clase, nos centramos en crear el modal que falta y replicar esta estructura. Después, pasaremos a implementar las pestañas.