Manga Website - Copy this React, Tailwind Component to your project
Diseña un mockup atractivo y funcional para una página web dedicada a leer manga online. El diseño debe ser moderno, limpio, y optimizado para facilitar la navegación de los usuarios. La estructura debe incluir lo siguiente: 1. Encabezado Barra de navegación fija en la parte superior con las opciones: Inicio, Catálogo, Géneros, Favoritos, Noticias. Botón destacado de Iniciar sesión/Registrarse. Barra de búsqueda prominente en el centro con el placeholder: "Busca tu manga favorito...". Logotipo en la esquina izquierda, diseñado con un estilo minimalista y relacionado con manga. 2. Página de Inicio 2.1. Banner Principal Carrusel dinámico que muestra los mangas destacados, con imágenes grandes de alta calidad. Cada slide del carrusel debe incluir: Portada del manga. Título en tipografía grande. Géneros en etiquetas pequeñas. Botón "Leer ahora". 2.2. Categorías Populares Diseña una sección con botones grandes y coloridos para géneros populares como: Shonen, Shojo, Seinen, Isekai, etc. Cada botón debe incluir un ícono o ilustración que lo identifique. 2.3. Top de la Temporada Una sección destacada que utiliza datos del endpoint /manga/seasons/now de la API Jikan para mostrar los mangas más populares de la temporada actual. Presenta los mangas en un carrusel horizontal o una cuadrícula. Cada tarjeta debe incluir: Imagen de portada. Título. Géneros destacados. Calificación. 2.4. Top Upcoming Una sección con mangas próximos a lanzarse, obtenidos desde el endpoint /manga/upcoming de la API Jikan. Tarjetas que incluyan: Portada. Título. Fecha estimada de lanzamiento. Descripción breve. 2.5. Categorías Extra Usa datos adicionales de la API para mostrar: Mangas más populares: (/top/manga con el parámetro filter=popularity). Mangas en emisión: (/manga con el filtro publishing=true). Mangas mejor calificados: (/top/manga con el parámetro filter=bypopularity). Diseña estas categorías en estilo de cuadrículas o listas con scroll infinito para fomentar la exploración. 3. Página de Lectura de Manga Visor principal: Zona limpia para leer capítulos de manga sin distracciones. Controles flotantes para avanzar/retroceder de página, zoom, modo claro/oscuro y ajustes de brillo. Lista de capítulos: Una barra lateral o sección inferior con capítulos disponibles. Marca los capítulos ya leídos con un ícono o estilo diferente. Incluye un botón para agregar el manga a "Favoritos" y opciones de descarga si es aplicable. 4. Catálogo de Manga Filtros avanzados: Por género, estado (completo o en emisión), calificación, y popularidad. Vista en cuadrícula o lista: Portadas de manga grandes con título, autor y sinopsis breve. 5. Página de Detalle de Manga Incluye: Imagen grande de portada. Título, autor, géneros y estado del manga. Descripción completa. Botón destacado para Leer desde el principio o Continuar leyendo. Lista de capítulos ordenados con indicador de progreso. 6. Diseño General Colores: Tonos oscuros o neutros con acentos brillantes en rojo, azul o naranja para elementos interactivos. Tipografía: Limpia y moderna. Usa fuentes más grandes para títulos y legibles para descripciones. Iconografía: Usa íconos intuitivos para botones y funciones. 7. Extras Sección de Noticias: Muestra noticias relacionadas con mangas, lanzamientos, o eventos del mundo del anime/manga. Modo claro/oscuro accesible desde cualquier página. Diseño responsivo para desktop y dispositivos móviles. Este diseño debe estar optimizado para la experiencia del usuario y aprovechar los datos dinámicos de la API Jikan para brindar contenido actualizado y relevante.
