Crearemos un banner principal y un modal para notificar uso indebido. Cubriremos tanto la parte visual como la lógica interactiva para mostrar y ocultar el modal.

1. Creación del Banner

Estructura inicial

1. Creamos un archivo banner.php y añadimos la estructura principal:

   <div class="container mx-auto bg-primary text-white p-6 flex justify-between items-center">
       <!-- Texto -->
       <div>
           <h2 class="text-xl font-semibold">Los principales empresas confían en Udemy</h2>
           <p class="text-gray-200 mb-2">Da acceso a tu equipo a mejores cursos en Udemy</p>
       </div>
   
       <!-- Botón -->
       <button class="bg-white text-primary font-semibold px-5 py-3 rounded-md hover:bg-gray-200">
           Probar mi negocio
       </button>
   </div>
   

Ajustes y estilos

• Añadimos un padding de p-6 al contenedor para darle espacio interno.
• El botón tiene estilos de hover para mejorar la experiencia visual:

  hover:bg-gray-200
  

• Personalizamos el color de fondo con un color específico:

  bg-primary
  

2. Sección: Notificar uso indebido

Estructura inicial

1. Creamos un botón bajo el banner para notificar uso indebido:

   <div class="mt-12 text-center">
       <button class="text-sm text-primary underline hover:text-primary-dark">
           Notificar uso indebido
       </button>
   </div>
   

2. Añadimos un margen superior mt-12 para separar el botón del banner.

Funcionalidad interactiva

Implementaremos un modal que aparece al hacer clic en el botón.

Estructura del modal

1. Creamos un modal básico usando Tailwind UI como referencia:

   <div x-data="{ modal: false }">
       <!-- Botón para abrir el modal -->
       <button @click="modal = true" class="text-sm text-primary underline">Notificar uso indebido</button>
   
       <!-- Modal -->
       <div x-show="modal" class="fixed inset-0 bg-gray-800 bg-opacity-90 flex items-center justify-center">
           <div class="bg-white p-6 rounded-lg max-w-md w-full">
               <!-- Encabezado -->
               <div class="flex justify-between items-center mb-4">
                   <h3 class="text-lg font-semibold">Notificar uso indebido</h3>
                   <button @click="modal = false" class="text-gray-500 hover:text-gray-800">&times;</button>
               </div>
   
               <!-- Contenido -->
               <p class="text-sm text-gray-700 mb-4">Por favor, describe el problema:</p>
               <textarea class="w-full border border-gray-300 p-3 rounded-lg mb-4" rows="4" placeholder="Escribe aquí..."></textarea>
   
               <!-- Botón de envío -->
               <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark w-full">
                   Enviar reporte
               </button>
           </div>
       </div>
   </div>
   

Lógica con Alpine.js

• El modal utiliza x-data para gestionar su estado:

  x-data="{ modal: false }"
  

• Añadimos un evento de clic para abrir y cerrar el modal:

  @click="modal = true"
  @click="modal = false"
  

• Usamos x-show para mostrar u ocultar el modal dinámicamente:

  x-show="modal"
  

3. Ajustes finales y funcionalidad avanzada

Optimización del diseño

• Centramos el modal con clases Tailwind:

  class="fixed inset-0 flex items-center justify-center"
  

• Aseguramos que el fondo tenga un efecto de opacidad:

  bg-gray-800 bg-opacity-90
  

Cerrar el modal al hacer clic fuera

1. Usamos la funcionalidad @click.outside para cerrar el modal al hacer clic fuera del contenido:

   <div @click.outside="modal = false" class="bg-white p-6 rounded-lg">
   

Personalización del fondo

• Ajustamos la opacidad del fondo para que sea más visible:

  bg-opacity-90