En esta clase, hemos trabajado en la creación de la sección de "Comprados Juntos con Frecuencia", donde hemos estructurado y diseñado un componente interactivo que incluye varios elementos clave. A continuación, se describen los aspectos principales que hemos desarrollado:
Estructura del Componente
- Sección principal: Se ha definido una estructura básica que contiene un título y un contenedor principal dividido en varias partes.
- Cursos individuales: Cada curso está representado por un diseño que incluye:
- Imagen del curso.
- Título del curso.
- Información del instructor y el número de estudiantes inscritos.
- Valoración con estrellas y un número de reseñas.
- Precio actual y precio original tachado.
Estilización y Diseño
- Clases de Tailwind CSS utilizadas:
- Flexbox para la distribución de elementos (
flex
, justify-between
, gap
).
- Espaciados y márgenes para mantener una separación visual adecuada.
- Tipografía específica como
text-sm
, text-gray-500
, y font-semibold
para resaltar diferentes secciones.
- Uso de
relative
y absolute
para posicionar elementos como el icono de "más" (+) sobre las imágenes.
- Adaptación visual:
- Ajustes en los tamaños de las imágenes con clases como
w-24
y w-48
.
- Separación entre elementos mediante
space-y-4
y márgenes personalizados.
Elementos Adicionales
- Etiqueta "Lo más vendido": Se ha añadido un distintivo en los cursos destacados para resaltar su popularidad.
- Botón de acción: Se incluye un botón para "Añadir todo a la cesta", diseñado con colores contrastantes (
bg-emerald-500
, text-white
) y efectos hover.
Funcionalidad y Detalles Finales
- Componentes dinámicos: Aunque actualmente los datos son estáticos, la estructura permite convertir los elementos en dinámicos en el futuro.
- Alineación y coherencia visual:
- Alineación del texto y los precios a la derecha (
text-right
).
- Optimización de la disposición para que todos los elementos estén correctamente distribuidos y visualmente atractivos.
Con esta sección completada, el diseño es limpio, funcional y estéticamente agradable. En las próximas clases, trabajaremos en secciones como la del instructor, las reseñas y los últimos cursos disponibles.