Trinchera WP
Regresar al curso Acceder Registrarse
Para acceder a este contenido:
Página de Curso de Pago
Comprados juntos con frecuencia

¡Obtén acceso a todos los cursos!

99
Acceso a todo

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.