Implementación de Página Home en Laravel con Diseño Personalizado

Construir una página de inicio funcional que muestre artículos destacados con paginación es una tarea fundamental en cualquier proyecto web con Laravel. A continuación se explica paso a paso cómo modificar rutas, controladores y vistas para lograrlo usando Tailwind CSS como sistema de estilos.

¿Cómo configurar las rutas y el controlador para la página home?

El primer paso consiste en ajustar el archivo de rutas. En lugar de trabajar con una vista genérica de blog, se define la ruta raíz del proyecto y una ruta para la publicación individual [0:22]. Esto permite que la página principal cargue directamente el listado de artículos.

Después, en el page controller, se traslada la lógica de búsqueda de artículos al método home [0:38]. La consulta que antes se ejecutaba en otro método ahora se asigna directamente a la vista del home. El método anterior puede eliminarse, dejando el controlador limpio y enfocado.

• Se define la ruta raíz apuntando al controlador correcto.
• La búsqueda de registros se mueve al método home.
• Los datos se pasan a la vista mediante la función correspondiente.

Al actualizar el navegador, el sistema sigue funcionando sin errores, confirmando que los registros están disponibles para ser renderizados [0:55].

¿Cómo estructurar la vista home con Tailwind CSS?

La vista home se modifica para incluir dos secciones principales: un área de información destacada y el listado de artículos [1:05]. La estructura se organiza con elementos div que actúan como contenedores.

Para el encabezado se utiliza un h1 con el texto "contenido técnico", aplicando clases de Tailwind como text-2xl, mb-8 y gray-900 [1:18]. Estas clases controlan el tamaño de tipografía, el margen inferior y el color del texto respectivamente.

¿Cómo imprimir los artículos con foreach?

Dentro del contenedor de artículos se implementa un ciclo @foreach de Blade [1:30]. Cada iteración genera un enlace que contiene la información del artículo. Las clases aplicadas al enlace incluyen:

• bg-gray-100: fondo gris claro.
• rounded-lg: bordes redondeados.
• px-6 py-4: relleno horizontal y vertical.

El contenido de cada enlace se organiza como una cuadrícula de una columna con gap-4 y mb-4 [1:52]. El margen inferior es importante porque debajo del listado se coloca la paginación.

¿Cómo mostrar la fecha y las etiquetas de cada artículo?

Cada artículo muestra un párrafo con dos elementos span: uno con la palabra "tutorial" y otro con la fecha de creación formateada [2:16]. El formato utiliza la sintaxis d/m/Y para mostrar día, mes y año de forma amigable.

Las clases del párrafo incluyen text-sm, flex e items-center con gap-2 para alinear los elementos horizontalmente [2:30]. La etiqueta "tutorial" recibe estilos especiales:

• uppercase: texto en mayúsculas.
• text-gray-700: color gris oscuro.
• bg-gray-200: fondo gris suave.
• rounded-full: bordes completamente redondeados.
• px-2 py-1: relleno compacto.

¿Cómo corregir errores comunes y finalizar el diseño?

Al guardar y actualizar el navegador por primera vez, aparece un error porque el @foreach estaba incompleto, faltaban las variables de iteración [2:58]. Es un error frecuente que se soluciona asegurándose de declarar correctamente la variable del ciclo.

Otro detalle importante es que la variable de la colección de artículos debe estar en plural para coincidir con lo que el controlador envía a la vista [3:10]. Una vez corregido, el listado se renderiza correctamente junto con la paginación al final de la página.

Para el título h2 de cada artículo se aplican las clases text-gray-900 y mt-2, otorgando un color oscuro y separación superior respecto a la etiqueta y la fecha [3:22].

El resultado final muestra una página home con artículos listados de forma ordenada, etiquetas visuales, fechas formateadas y un sistema de paginación funcional al pie del listado. ¿Has implementado paginación en tus proyectos? Comparte tu experiencia en los comentarios.