En esta clase donde trabajaremos en la sección de "Lo que aprenderás". Esta sección incluye un bloque con borde, dos columnas y la funcionalidad de "ver más" que ya hemos implementado en clases anteriores. ¡Vamos a ello!

1. Estructura Inicial

Creación del Archivo

1. Creamos un archivo llamado aprenderas.php.

2. Dentro del archivo, definimos un contenedor principal con un borde:

   <div class="border border-gray-300 p-6">
       <h2 class="text-xl font-bold mb-4">Lo que aprenderás</h2>
   </div>
   

3. Añadimos un contenedor para las columnas:

   <div class="grid grid-cols-2 gap-4">
       <!-- Aquí irán los elementos -->
   </div>
   

2. Estructura de los Elementos

Diseño de un Ítem

1. Cada ítem incluye un ícono y texto:

   <div class="flex items-center gap-2">
       <svg class="text-green-500 w-5 h-5">...</svg>
       <span class="text-sm">Cómo evaluar proyectos</span>
   </div>
   

2. Añadimos la clase flex-none al ícono para evitar que se redimensione:

   <svg class="flex-none text-green-500 w-5 h-5">...</svg>
   

3. Generación Dinámica con PHP

Lista Dinámica

1. Creamos una lista de elementos:

   <?php
   $aprenderas = [
       "Cómo evaluar proyectos",
       "Desarrollar habilidades clave",
       "Colaborar con equipos remotos",
       "Usar herramientas modernas"
   ];
   ?>
   

2. Iteramos sobre la lista para generar los ítems dinámicamente:

   <?php foreach ($aprenderas as $elemento): ?>
       <div class="flex items-center gap-2">
           <svg class="flex-none text-green-500 w-5 h-5">...</svg>
           <span class="text-sm"><?php echo $elemento; ?></span>
       </div>
   <?php endforeach; ?>
   

4. Funcionalidad "Ver más"

Implementación con Alpine.js

1. Añadimos el atributo x-data al contenedor principal:

   <div x-data="{ expanded: false }" class="relative">
   

2. Configuramos la funcionalidad de "ver más":

   <div x-show="expanded" class="grid grid-cols-2 gap-4">
       <!-- Ítems dinámicos -->
   </div>
   <div x-show="!expanded" class="grid grid-cols-2 gap-4 line-clamp-3">
       <!-- Ítems dinámicos limitados -->
   </div>
   

3. Añadimos un botón para alternar el estado:

   <button @click="expanded = !expanded" class="text-blue-500 mt-4">
       <span x-show="!expanded">Ver más</span>
       <span x-show="expanded">Ver menos</span>
   </button>
   

4. Ajustamos el contenedor relativo para manejar la transición:

   <div class="relative">
       <div class="absolute bottom-0 h-12 bg-gradient-to-t from-white to-transparent w-full"></div>
   </div>
   

5. Ajustes Finales

Estilos y Espaciado

1. Añadimos un margen inferior al contenedor principal:

   <div class="mb-8">
       <!-- Contenido -->
   </div>
   

2. Ajustamos los tamaños de texto y espacios:

   • Títulos: text-xl font-bold.
   • Espaciado entre elementos: gap-4.
   • Padding interno: p-6.

Verificación Visual

Comprobamos que los ítems se alineen correctamente y que el botón "ver más" funcione como se espera. Si es necesario, ajustamos los tamaños y colores para mayor consistencia visual.