APV
Adrian Pupo Vega

Manga Verse Online - Copy this React, Tailwind Component to your project

Design a modern user interface for a manga reading website called 'MangaVerse Online' with a grid layout that includes two sidebars: a Leftbar and a Rightbar. The layout should also feature a header bar containing the website name 'MangaVerse Online' written in a modern, legible font as a logo. In the center of the header, include a well integrated search bar that fits smoothly within the design. On the right side of the header, add a button that allows users to toggle between dark mode and light mode. The default theme should be dark mode, but users can easily switch to light mode. For light mode, use a strong dark blue color for the bars, a white background for the main area, with a dark shadow and slightly transparent bars. For dark mode, use dark red bars with a black background, maintaining the same transparency and shadow as in light mode. The header bar should be positioned between the two sidebars and should not overlap or invade the space of either sidebar. Leftbar: At the top, include the website's logo. Below the logo, include the following navigation sections: Login/Sign Up: A section with a small form where users can log in or register. Home: A section that navigates to the homepage. Pending: A section that displays pending chapters of manga from the user's list. My List: A section where users can access their favorite manga. New: A section showing manga added in the last 30 days. Library: A section for browsing the entire manga library available on the website. Rightbar: Include a table showing the top 10 most viewed manga of the week. Below it, add another table for the top 10 most viewed manga of the month. The content area should feature: An Updates section that displays the latest manga chapters added. The content should show the cover image of the manga, and below each cover, show the last 2 chapters, which should be clickable. An Added section that showcases newly uploaded manga, also with the cover image of each manga. In the Rightbar tables, each manga should have a small image of its cover that fits well with the list. For small screens: Both sidebars should be collapsible into a dropdown menu to save space when the resolution is too small for them to be displayed fully. They should only expand when toggled. The website also requires a footer that matches the design of the header in terms of style, shadows, and transparency, ensuring it does not overlap or invade the space of the sidebars. The layout should be fully responsive, optimized for both desktop and mobile, with a sleek and modern aesthetic focused on readability and user experience.

Prompt
Component Preview

About

MangaVerseOnline - A sleek manga reading site with a grid layout, sidebars, dark/light mode toggle, responsive design, and built with. View and copy code!

Share

Last updated 1 month ago