En esta clase, hemos trabajado en la sección de Udemy Business, destacando elementos clave como el logo, texto informativo, botones de acción, y una estructura visualmente atractiva y funcional. Esta sección combina texto, imágenes, y un diseño responsivo.
Objetivos de la Clase
- Diseñar una sección para Udemy Business con un diseño limpio y profesional.
- Implementar un sistema de diseño con columnas y elementos centrados.
- Incorporar imágenes y botones estilizados con Tailwind CSS.
- Garantizar que los elementos sean responsivos y estén bien alineados.
Resumen del Proceso
-
Estructura Inicial:
- Creamos un archivo específico para la sección (
business.php).
- Configuramos un contenedor principal con padding (
py-16) y un ancho máximo centrado (max-w-2xl mx-auto).
-
Diseño de Columnas:
- Usamos una cuadrícula (
grid-cols-2 gap-8) para organizar los elementos:
- Columna 1: Incluye el logo de Udemy Business, un encabezado (
h2), una lista de beneficios y botones de acción.
- Columna 2: Muestra una imagen representativa de Udemy Business.
-
Elementos y Botones:
- Botón principal:
- Clases utilizadas:
bg-primary text-white font-semibold px-4 py-2.
- Botón secundario:
- Clases utilizadas:
border border-primary text-primary font-semibold px-4 py-2 hover:bg-gray-200.
- Ambos botones tienen transiciones suaves (
transition-colors) para mejorar la experiencia interactiva.
-
Optimización Visual:
- Ajustamos el espaciado entre elementos con
space-y-6.
- Usamos
text-3xl font-bold para el título y text-xl para descripciones, garantizando legibilidad y jerarquía visual.
- Centramos la imagen verticalmente con
items-center y ajustamos su tamaño con h-48.
-
Añadiendo la Segunda Sección:
- Creamos una segunda cuadrícula para mostrar otra parte del contenido.
- Se utiliza el mismo patrón de diseño: imagen en una columna y texto con botones en la otra.
Puntos Destacados
- Estilo Consistente: El diseño sigue las pautas generales del proyecto, con colores y tipografías consistentes.
- Interactividad Mejorada: Los botones reaccionan al hover con cambios de color, haciendo la interfaz más amigable.
- Flexibilidad y Escalabilidad: La estructura modular permite añadir más secciones similares con facilidad.
