Footer

Vamos a trabajar en el footer, específicamente en la sección de "Udemy Business". Este footer será independiente, pero también reutilizable para futuros diseños. Aunque lo ideal sería separarlo como un componente dentro de una estructura organizada, lo incluiremos aquí por simplicidad y consistencia con el curso actual.

1. Configuración Inicial

Creación del Archivo

Creamos un archivo llamado footer-udemy-business.php.

Estructuramos la etiqueta principal del footer:

<footer class="bg-primary text-white py-6">
    <div class="container mx-auto flex justify-between items-center">
        <!-- Columna 1: Texto -->
        <div class="text-2xl font-semibold">
            Únete a las empresas líderes que confían en Udemy Business.
        </div>

        <!-- Columna 2: Logos de empresas -->
        <div class="flex items-center gap-4">
            <img src="URL_LOGO_1" alt="Logo 1" class="h-6">
            <img src="URL_LOGO_2" alt="Logo 2" class="h-6">
            <img src="URL_LOGO_3" alt="Logo 3" class="h-6">
        </div>
    </div>
</footer>

Ajustes Visuales

Añadimos bg-primary y text-white al footer para un diseño profesional.
Usamos py-6 para añadir padding vertical.
Organizamos los elementos con flex y gap-4 para separar los logos.

2. Estilos Detallados

Texto del Footer

Ajustamos el texto principal:

<div class="text-2xl font-semibold">
    Únete a las empresas líderes que confían en Udemy Business.
</div>

Tamaño de texto: text-2xl.
Peso de fuente: font-semibold.

Personalizamos el color del texto si es necesario:
```
text-udemy {
    color: #color_específico;
}
```

Logos de Empresas

Añadimos los logos con una altura estándar:
```
<img src="URL_LOGO" alt="Logo" class="h-6">
```
- Utilizamos h-6 para establecer un tamaño consistente.
- Aplicamos gap-4 para espaciar los logos.

Limitamos el ancho del contenido con max-w-2xl:

<div class="max-w-2xl mx-auto">
    <!-- Contenido del footer -->
</div>

3. Añadiendo un Separador

Línea Divisoria

Creamos un separador visual debajo del footer principal:
```
<div class="border-t border-gray-600 my-4"></div>
```
- Usamos border-t para la línea superior.
- Elegimos border-gray-600 para un color sutil pero visible.
Ajustamos el espacio alrededor con my-4.

4. Optimización y Reutilización

Componente Reutilizable

Aunque no crearemos un componente en esta clase, esta estructura puede adaptarse fácilmente:

Crear una carpeta components/footers/.
Separar los diferentes tipos de footer (general y "Udemy Business").
Importar estos componentes donde sea necesario.

Adaptación para Cursos de Pago

Cuando trabajemos en la sección de cursos de pago, este footer puede reutilizarse sin necesidad de duplicar el código. Simplemente lo copiamos o lo importamos como componente.

¡Obtén acceso a todos los cursos!