Trabajaremos en la sección de instructores, implementando dos columnas que incluyen:

• Imagen y calificación del instructor.
• Información adicional y descripción con funcionalidad de "ver más".

1. Estructura Inicial

Encabezado

Comenzamos con el encabezado de la sección:

<h3 class="text-3xl font-bold">Instructor</h3>

Nombre y descripción breve

1. Añadimos un enlace con el nombre del instructor:

   <a href="#" class="text-xl font-semibold underline hover:text-blue-500">Marco Mendoza</a>
   

2. Agregamos una breve descripción:

   <p class="text-gray-600">Ingeniero en sistemas y autodidacta</p>
   

2. Diseño de dos columnas

1. Contenedor principal:

   • Utilizamos flex para organizar dos columnas:

     <div class="flex items-center gap-6">
         <!-- Columna 1: Imagen -->
         <img src="URL_DE_LA_IMAGEN" alt="Instructor" class="w-28 h-auto rounded-full border border-gray-300">
     
         <!-- Columna 2: Calificación y detalles -->
         <div>
             <div class="flex items-center gap-3">
                 <!-- Estrella -->
                 <svg class="w-4 h-4 text-yellow-400">...</svg>
                 <p class="text-sm">Calificación del instructor: 4.6</p>
             </div>
             <div class="flex flex-col space-y-2 mt-2">
                 <p class="text-sm">6303 reseñas</p>
                 <p class="text-sm">101,502 estudiantes</p>
                 <p class="text-sm">12 cursos</p>
             </div>
         </div>
     </div>
     

2. Ajustes visuales:

   • Añadimos gap y márgenes para separar los elementos.
   • Optimizamos la imagen del instructor con rounded-full y bordes para darle un diseño limpio.

3. Descripción con funcionalidad "ver más"

Contenido inicial

1. Agregamos una breve descripción con formato:

   <p class="text-sm text-gray-600 mt-4">
       Saludos, mi nombre es <strong>Marco Mendoza</strong>. Soy un apasionado de la enseñanza y la tecnología.
   </p>
   

2. Añadimos un contenedor con funcionalidad de "ver más":

   <div x-data="{ expanded: false }" class="relative">
       <!-- Contenido colapsado -->
       <p x-bind:class="expanded ? 'line-clamp-none' : 'line-clamp-3'" class="text-sm text-gray-600">
           Aquí puedes leer una descripción más extensa sobre mi experiencia y los cursos que he diseñado para ayudarte a crecer profesionalmente.
       </p>
   
       <!-- Gradiente para indicar contenido colapsado -->
       <div class="absolute bottom-0 h-12 bg-gradient-to-t from-white to-transparent w-full" x-show="!expanded"></div>
   
       <!-- Botón "ver más" -->
       <button @click="expanded = !expanded" class="text-blue-500 mt-2">
           <span x-show="!expanded">Ver más</span>
           <span x-show="expanded">Ver menos</span>
       </button>
   </div>
   

3. Configuramos el gradiente para mejorar la experiencia visual al colapsar contenido.

4. Ajustes finales

1. Espaciado y alineación:

   • Utilizamos space-y-4 para separar elementos verticalmente.
   • Ajustamos márgenes con mt-4 y mb-4 para una separación consistente.

2. Fuente y colores:

   • Aplicamos text-gray-500 o text-gray-600 para mantener un diseño profesional.
   • Usamos tamaños de texto text-sm para contenido descriptivo.

3. Interactividad del botón "ver más":

   • Añadimos transiciones suaves al expandir y contraer el contenido.
   • Aseguramos que el botón cambie dinámicamente entre "Ver más" y "Ver menos".