🚀 feat(ui): added manga with better UI

27 files changed, 566 insertions, 135 deletions

diff --git a/next.config.mjs b/next.config.mjs
index 216839b..c587eaf 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -5,7 +5,6 @@ const nextConfig = {
 			{

 				protocol: "https",

 				hostname: "asianimg.pro",

-				pathname: "/cover/**",

 			},

 			{

 				protocol: "https",

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index b121400..6740aac 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -23,8 +23,8 @@ const AnimeInfoHomepage = async ({ params }) => {
 			className="h-screen bg-white dark:bg-black"

 		>

 			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-white dark:to-black">

-				<section className="pt-12  lg:w-9/12 m-auto">

-					<div className="flex items-center justify-center lg:justify-start md:justify-start">

+				<section className="m-auto pt-16 lg:w-9/12">

+					<div className="flex items-center justify-center md:justify-start lg:justify-start">

 						<Image

 							isBlurred

 							width={190}

@@ -43,7 +43,7 @@ const AnimeInfoHomepage = async ({ params }) => {
 											key={index}

 											color="warning"

 											variant="faded"

-											className="mr-1 mb-1"

+											className="mb-1 mr-1"

 										>

 											<p className="text-xs">{item}</p>

 										</Chip>

diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx
index 691b276..ba5c7cf 100644
--- a/src/app/anime/components/search_results.jsx
+++ b/src/app/anime/components/search_results.jsx
@@ -1,10 +1,8 @@
-"use server";
-
 import { search_results } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 import styles from "../../page.module.css";
 
-import { Card, CardHeader, CardBody } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/react";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -15,7 +13,7 @@ const SearchResults = async (title) => {
 
 	return (
 		<section
-			className={`flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
+			className={`flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster} `}
 		>
 			{data &&
 				data.results.map((item, index) => (
@@ -23,26 +21,31 @@ const SearchResults = async (title) => {
 						key={index}
 						href={`/anime/${item.id}`}
 						aria-label="anime redirection links"
-						className="flex flex-col items-center mx-1 "
+						className="mx-1 flex flex-col items-center"
+						title={item.title}
 					>
-						<Card className="overflow-hidden" isPressable>
+						<Card
+							className="overflow-hidden"
+							isPressable
+							shadow="lg"
+						>
 							<CardBody>
 								<Image
 									alt="Searched Anime Poster"
 									src={item.image}
 									width={190}
 									height={120}
-									className="rounded-md h-64"
+									className="h-64 rounded-md"
 									priority
 								/>
 							</CardBody>
-							<CardHeader>
+							<CardFooter>
 								<h4
-									className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+									className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}
 								>
 									{item.title}
 								</h4>
-							</CardHeader>
+							</CardFooter>
 						</Card>
 					</Link>
 				))}
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index ce5ca34..bb8d6f1 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -19,7 +19,7 @@ const AnimeHomepage = async () => {
 

 	const header = (title) => (

 		<>

-			<p className={`antialiased font-bold text-sky-400 text-2xl my-1`}>

+			<p className={`my-1 text-2xl font-bold text-sky-400 antialiased`}>

 				{title}

 			</p>

 		</>

@@ -33,22 +33,22 @@ const AnimeHomepage = async () => {
 						key={index}

 						href={`/anime/${item.id}`}

 						aria-label="anime redirection links"

-						className="flex flex-col items-center mx-1 "

+						className="mx-1 flex flex-col items-center"

 					>

-						<Card className="overflow-visible " isPressable>

+						<Card className="overflow-visible" isPressable>

 							<CardBody>

 								<Image

 									alt="Anime Poster"

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={270}

 									height={160}

-									className="h-60 rounded-md overflow-hidden"

+									className="h-60 overflow-hidden rounded-md"

 									priority

 								/>

 							</CardBody>

 							<CardHeader>

 								<h4

-									className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}

+									className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}

 								>

 									{item.title}

 								</h4>

@@ -60,7 +60,7 @@ const AnimeHomepage = async () => {
 	);

 

 	return (

-		<section className="pt-12">

+		<section className="pt-4">

 			<div className="mx-2">

 				<SearchBar />

 			</div>

@@ -68,7 +68,7 @@ const AnimeHomepage = async () => {
 			<div className="mx-2">

 				{header("Popular Animes")}

 				<div

-					className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}

+					className={`flex overflow-auto pb-3 ${styles.ScrollBarAdjuster} `}

 				>

 					{format(popular_data)}

 				</div>

@@ -77,7 +77,7 @@ const AnimeHomepage = async () => {
 			<div className="mx-2">

 				{header("Recent Animes")}

 				<div

-					className={`flex overflow-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}

+					className={`flex overflow-auto pb-3 ${styles.ScrollBarAdjuster}`}

 				>

 					{format(recent_data)}

 				</div>

@@ -85,7 +85,7 @@ const AnimeHomepage = async () => {
 			<div className="mx-2">

 				{header("Top Airing Animes")}

 				<div

-					className={`flex overflow-x-auto overflow-y-hidden pb-3 ${styles.ScrollBarAdjuster}`}

+					className={`flex overflow-auto pb-3 ${styles.ScrollBarAdjuster}`}

 				>

 					{format(airing_data)}

 				</div>

diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx
index 104911b..950b807 100644
--- a/src/app/components/header/header.jsx
+++ b/src/app/components/header/header.jsx
@@ -1,30 +1,38 @@
 import Link from "next/link";

-import styles from "../../page.module.css";

 import { ThemeSwitcher } from "../themeSwitcher";

+import {

+	Navbar,

+	NavbarBrand,

+	NavbarContent,

+	NavbarItem,

+	Button,

+} from "@nextui-org/react";

 

 export default async function Header() {

 	return (

-		<div className="fixed top-0 w-full flex items-center justify-between z-50  dark:bg-black bg-white">

-			<h4 className="text-teal-400 text-2xl p-2">

-				<Link href={"/"}>Dramalama</Link>

-			</h4>

-			{/* <div

-				className={`mx-2 flex items-center overflow-auto ${styles.ScrollBarAdjuster}`}

-			>

-				<Link href={"/anime"} className="mx-2 hover:text-sky-400">

-					<p>Anime</p>

-				</Link>

-				<Link href={"/kdrama"} className="mx-2 hover:text-sky-400">

-					<p>Kdrama</p>

-				</Link>

-				<Link href={"/series"} className="mx-2 hover:text-sky-400">

-					<p>Series</p>

-				</Link>

-				<Link href={"/movies"} className="mx-2 hover:text-sky-400">

-					<p>Movies</p>

-				</Link>

-			</div> */}

-			<ThemeSwitcher />

-		</div>

+		<Navbar isBordered>

+			<NavbarBrand>

+				<p className="text-2xl font-bold">

+					<Link href="/">Dramalama</Link>

+				</p>

+			</NavbarBrand>

+

+			<NavbarContent justify="end">

+				<NavbarItem>

+					<ThemeSwitcher />

+				</NavbarItem>

+				<NavbarItem>

+					<Button

+						as={Link}

+						color="success"

+						href="https://github.com/real-zephex/Dramalama"

+						variant="faded"

+						target="_blank"

+					>

+						Github

+					</Button>

+				</NavbarItem>

+			</NavbarContent>

+		</Navbar>

 	);

 }

diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index 94f5adb..b18c0ee 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -18,9 +18,9 @@ export default async function DramaInfo({ params }) {
 			}}

 			className="h-screen bg-white dark:bg-black"

 		>

-			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-white-400 dark:to-black">

-				<section className="pt-12  lg:w-9/12 m-auto">

-					<div className="flex items-center justify-center lg:justify-start md:justify-start">

+			<section className="to-white-400 absolute inset-0 bg-gradient-to-b from-transparent dark:to-black">

+				<section className="m-auto pt-16 lg:w-9/12">

+					<div className="flex items-center justify-center md:justify-start lg:justify-start">

 						<Image

 							isBlurred

 							width={190}

@@ -39,7 +39,7 @@ export default async function DramaInfo({ params }) {
 											key={index}

 											color="warning"

 											variant="faded"

-											className="mr-1 mb-1"

+											className="mb-1 mr-1"

 										>

 											<p className="text-xs">{item}</p>

 										</Chip>

diff --git a/src/app/kdrama/components/searchFormatter.jsx b/src/app/kdrama/components/searchFormatter.jsx
index cc23fa7..21a52a5 100644
--- a/src/app/kdrama/components/searchFormatter.jsx
+++ b/src/app/kdrama/components/searchFormatter.jsx
@@ -1,5 +1,3 @@
-"use server";
-
 import { Card, CardHeader, CardBody } from "@nextui-org/react";
 import Link from "next/link";
 import Image from "next/image";
@@ -18,7 +16,7 @@ const SearchedDataFormatter = async (data) => {
 						key={index}
 						href={`/kdrama/${encodeURIComponent(item.id)}`}
 						aria-label="anime redirection links"
-						className="flex flex-col items-center mx-1"
+						className="mx-1 flex flex-col items-center"
 						title={item.title}
 					>
 						<Card className="overflow-hidden" isPressable>
@@ -28,12 +26,12 @@ const SearchedDataFormatter = async (data) => {
 									src={item.image}
 									width={185}
 									height={120}
-									className="rounded-md h-64"
+									className="h-64 rounded-md"
 									priority
 								/>
 							</CardBody>
 							<CardHeader>
-								<h4 className="antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis ">
+								<h4 className="w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased">
 									{item.title}
 								</h4>
 							</CardHeader>
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx
index afcb8a2..f5e1e0e 100644
--- a/src/app/kdrama/page.jsx
+++ b/src/app/kdrama/page.jsx
@@ -18,7 +18,7 @@ const KdramaHomepage = async () => {
 

 	const header = (title) => (

 		<>

-			<p className="antialiased font-bold text-sky-400 text-2xl my-1">

+			<p className="my-1 text-2xl font-bold text-sky-400 antialiased">

 				{title}

 			</p>

 		</>

@@ -32,22 +32,22 @@ const KdramaHomepage = async () => {
 						key={index}

 						href={`/kdrama/${encodeURIComponent(item.id)}`}

 						aria-label="anime redirection links"

-						className="flex flex-col items-center mx-1"

+						className="mx-1 flex flex-col items-center"

 					>

-						<Card className="overflow-visible " isPressable>

+						<Card className="overflow-visible" isPressable>

 							<CardBody>

 								<Image

 									alt="Kdrama Poster"

 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={270}

 									height={160}

-									className="h-60 rounded-md overflow-hidden"

+									className="h-60 overflow-hidden rounded-md"

 									priority

 								/>

 							</CardBody>

 							<CardHeader>

 								<h4

-									className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}

+									className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}

 								>

 									{item.title}

 								</h4>

@@ -59,7 +59,7 @@ const KdramaHomepage = async () => {
 	);

 

 	return (

-		<section className="pt-12">

+		<section className="pt-4">

 			<div>

 				<Searchbar />

 			</div>

diff --git a/src/app/loading.jsx b/src/app/loading.jsx
index 2f12723..2fd3711 100644
--- a/src/app/loading.jsx
+++ b/src/app/loading.jsx
@@ -2,7 +2,7 @@ import { CircularProgress } from "@nextui-org/react";
 
 const LoadingScreen = async () => {
 	return (
-		<div className="w-screen h-screen flex gap-4 items-center justify-center">
+		<div className="flex h-[90dvh] w-screen items-center justify-center gap-4">
 			<CircularProgress
 				color="success"
 				aria-label="Loading..."
diff --git a/src/app/manga/[id]/page.jsx b/src/app/manga/[id]/page.jsx
new file mode 100644
index 0000000..d6828b2
--- /dev/null
+++ b/src/app/manga/[id]/page.jsx
@@ -0,0 +1,50 @@
+import { MangaInfoResults } from "../components/requests";
+import Image from "next/image";
+import { Chip } from "@nextui-org/react";
+
+import MangaDescriptionTabs from "../components/descriptionTabs";
+
+const MangaInfoPage = async ({ params }) => {
+	const { id } = params;
+
+	const data = await MangaInfoResults(id);
+
+	return (
+		<section>
+			<section>
+				<section className="m-auto w-full lg:w-9/12">
+					{/* header section */}
+					<div className="flex items-center p-2">
+						<Image
+							src={data.image}
+							width={170}
+							height={280}
+							className="rounded-lg"
+							alt="Manga Poster"
+						/>
+						<div className="ml-2">
+							<h3 className="text-2xl">
+								{data.title.english || data.title.romaji}
+							</h3>
+							{data.genres &&
+								data.genres.map((item, index) => (
+									<Chip
+										key={index}
+										color="warning"
+										variant="faded"
+										size="sm"
+										className="mr-1"
+									>
+										{item}
+									</Chip>
+								))}
+						</div>
+					</div>
+					<MangaDescriptionTabs data={data} />
+				</section>
+			</section>
+		</section>
+	);
+};
+
+export default MangaInfoPage;
diff --git a/src/app/manga/components/chapterPages.jsx b/src/app/manga/components/chapterPages.jsx
new file mode 100644
index 0000000..59320fd
--- /dev/null
+++ b/src/app/manga/components/chapterPages.jsx
@@ -0,0 +1,35 @@
+"use server";
+
+import { MangaPages } from "./requests";
+import Image from "next/image";
+
+const MangaChapters = async (id) => {
+	const data = await MangaPages(id);
+
+	let chapterPages = [];
+	for (let items of data.chapter.data) {
+		chapterPages.push(`${data.baseUrl}/data/${data.chapter.hash}/${items}`);
+	}
+	console.log(chapterPages);
+
+	return (
+		<div className="flex flex-col items-center">
+			{chapterPages &&
+				chapterPages.length > 0 &&
+				chapterPages.map((item, index) => (
+					<div key={index} className="mb-4">
+						<Image
+							src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item}&referer=https://mangadex.org`}
+							width={1280}
+							height={720}
+							className="h-auto w-auto"
+							alt="Manga Pages"
+						/>
+						<p className="text-center">{index}</p>
+					</div>
+				))}
+		</div>
+	);
+};
+
+export default MangaChapters;
diff --git a/src/app/manga/components/descriptionTabs.jsx b/src/app/manga/components/descriptionTabs.jsx
new file mode 100644
index 0000000..19191ab
--- /dev/null
+++ b/src/app/manga/components/descriptionTabs.jsx
@@ -0,0 +1,159 @@
+"use client";
+
+import {
+	Tabs,
+	Tab,
+	Card,
+	CardBody,
+	Divider,
+	Image,
+	Select,
+	SelectItem,
+} from "@nextui-org/react";
+import { FaRegThumbsUp, FaRegStar } from "react-icons/fa";
+import Link from "next/link";
+import { useState } from "react";
+
+import MangaChapters from "./chapterPages";
+
+const MangaDescriptionTabs = ({ data }) => {
+	const [pages, setPages] = useState(<></>);
+
+	async function get_pages(id) {
+		setPages(<p className="text-center">Loading...</p>);
+		const data = await MangaChapters(id);
+		setPages(data);
+	}
+
+	return (
+		<div className="flex w-full flex-col">
+			<Tabs aria-label="Options">
+				<Tab key="description" title="Description">
+					<Card shadow="sm">
+						<CardBody
+							dangerouslySetInnerHTML={{
+								__html: data.description,
+							}}
+						></CardBody>
+					</Card>
+				</Tab>
+				<Tab key="details" title="Details">
+					<Card shadow="sm">
+						<CardBody>
+							<h4>
+								<strong>Status</strong>:{" "}
+								<span>{data.status || "not sure"}</span>
+							</h4>
+							<h4>
+								<strong>Type</strong>:{" "}
+								<span>{data.type || "not sure"}</span>
+							</h4>
+							<h4>
+								<strong className="text-green-400">
+									Started on
+								</strong>
+								:{" "}
+								<span>
+									{data.startDate.day}-{data.startDate.month}-
+									{data.startDate.year}
+								</span>
+							</h4>
+							<h4>
+								<strong className="text-red-400">
+									Ended on
+								</strong>
+								:{" "}
+								<span>
+									{data.endDate.day}-{data.endDate.month}-
+									{data.endDate.year}
+								</span>
+							</h4>
+							<div className="flex items-center">
+								<section className="flex items-center">
+									<FaRegThumbsUp />
+									<p className="ml-1">{data.popularity}</p>
+								</section>
+								<Divider orientation="vertical" />
+								<section className="ml-2 flex items-center">
+									<FaRegStar />
+									<p className="ml-1">
+										{Number(data.rating) / 10}
+									</p>
+								</section>
+							</div>
+						</CardBody>
+					</Card>
+				</Tab>
+				<Tab key="recommendations" title="Recommendation">
+					<Card shadow="sm">
+						<CardBody>
+							{data.recommendations &&
+								data.recommendations.length > 0 &&
+								data.recommendations.map((item, index) => (
+									<Link
+										key={index}
+										href={`/manga/${item.id}`}
+									>
+										<Card
+											isPressable
+											isHoverable
+											shadow="sm"
+											className="mb-2 flex w-full flex-row items-center"
+										>
+											<Image
+												width={120}
+												src={item.image}
+												className="p-1"
+												shadow="lg"
+												isBlurred
+											/>
+											<CardBody>
+												<p className="text-xl">
+													{item.title.english ||
+														item.title.romaji}
+												</p>
+											</CardBody>
+										</Card>
+									</Link>
+								))}
+						</CardBody>
+					</Card>
+				</Tab>
+				<Tab key="chapter" title="Chapter">
+					<Card shadow="sm" className="p-2">
+						<Select
+							className="w-full lg:max-w-md"
+							label="Select chapter"
+						>
+							{data.chapters &&
+								data.chapters.length > 0 &&
+								data.chapters.map((item, index) => {
+									if (item.pages > 0) {
+										return (
+											<SelectItem
+												key={index}
+												onClick={async () =>
+													await get_pages(item.id)
+												}
+												textValue={item.title}
+											>
+												{item.title} -{" "}
+												{item.chapterNumber}
+											</SelectItem>
+										);
+									} else {
+										return;
+									}
+								})}
+						</Select>
+						<CardBody>
+							<div className="w-full">{pages}</div>
+						</CardBody>
+					</Card>
+				</Tab>
+			</Tabs>
+		</div>
+	);
+};
+
+export default MangaDescriptionTabs;
diff --git a/src/app/manga/components/inputContainer.jsx b/src/app/manga/components/inputContainer.jsx
new file mode 100644
index 0000000..7526f9a
--- /dev/null
+++ b/src/app/manga/components/inputContainer.jsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+	Input,
+	Progress,
+	Card,
+	CardBody,
+	Image,
+	Chip,
+} from "@nextui-org/react";
+import Link from "next/link";
+import { useState } from "react";
+
+import { SearchedMangaResults } from "./requests";
+
+const MangaSearchBox = () => {
+	const [searchedMangaTitle, setMangaSearchedTitle] = useState("");
+	const [results, setResults] = useState(
+		<div className="mt-4 w-full">
+			<p className="text-center">
+				Start typing and results will show here
+			</p>
+		</div>,
+	);
+	const [loading, setLoading] = useState(<></>);
+
+	async function GetResults() {
+		if (!searchedMangaTitle) {
+			setResults(<></>);
+			return;
+		}
+		setLoading(
+			<Progress
+				size="sm"
+				isIndeterminate
+				aria-label="Loading..."
+				className="mb-4 mt-4 w-full"
+			/>,
+		);
+		const data = await SearchedMangaResults(searchedMangaTitle);
+		const format = (
+			<div className="mt-2 w-full">
+				{data && data.results.length > 0 ? (
+					data.results.map((item, index) => (
+						<Link href={`/manga/${item.id}`} key={index}>
+							<Card
+								isPressable
+								isBlurred
+								isHoverable
+								shadow="sm"
+								className="mb-2 flex w-full flex-row items-center"
+							>
+								<Image
+									src={item.image}
+									width={150}
+									isBlurred
+									shadow="sm"
+									className="p-1"
+								/>
+								<CardBody>
+									<p className="text-xl">
+										{item.title.english ||
+											item.title.romaji}
+									</p>
+									<section>
+										{item.genres &&
+											item.genres.map((item, index) => (
+												<Chip
+													key={index}
+													size="sm"
+													color="warning"
+													variant="faded"
+													className="mr-1"
+												>
+													{item}
+												</Chip>
+											))}
+									</section>
+								</CardBody>
+							</Card>
+						</Link>
+					))
+				) : (
+					<p className="text-center">
+						No results found for the searched title
+					</p>
+				)}
+			</div>
+		);
+		setLoading(<></>);
+		setResults(format);
+	}
+	return (
+		<main>
+			<div className="flex w-full flex-wrap">
+				<Input
+					type="text"
+					autoFocus
+					label="Manga"
+					placeholder="Enter manga/manhwa title"
+					value={searchedMangaTitle}
+					onChange={(event) => {
+						setMangaSearchedTitle(event.target.value);
+					}}
+					onKeyDown={async () => {
+						await GetResults();
+					}}
+				/>
+				{loading}
+				{results}
+			</div>
+		</main>
+	);
+};
+
+export default MangaSearchBox;
diff --git a/src/app/manga/components/requests.js b/src/app/manga/components/requests.js
new file mode 100644
index 0000000..d3d9e9c
--- /dev/null
+++ b/src/app/manga/components/requests.js
@@ -0,0 +1,28 @@
+"use server";
+import {
+	manga_search_url,
+	manga_info_url,
+	manga_chapters_pages,
+} from "../../../../utils/manga_urls";
+
+export const SearchedMangaResults = async (title) => {
+	const res = await fetch(manga_search_url(title), {
+		next: { revalidate: 21600 },
+	});
+	const data = await res.json();
+	return data;
+};
+
+export const MangaInfoResults = async (id) => {
+	const res = await fetch(manga_info_url(id), {
+		next: { revalidate: 21600 },
+	});
+	const data = await res.json();
+	return data;
+};
+
+export const MangaPages = async (id) => {
+	const res = await fetch(manga_chapters_pages(id), { cache: "force-cache" });
+	const data = await res.json();
+	return data;
+};
diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx
new file mode 100644
index 0000000..6992fa7
--- /dev/null
+++ b/src/app/manga/page.jsx
@@ -0,0 +1,21 @@
+import MangaSearchBox from "./components/inputContainer";
+
+const MangaHomePage = async () => {
+	return (
+		<main className="flex h-[90dvh] w-full flex-col items-center">
+			<div className="mt-2">
+				<p className="text-center text-xl">
+					Welcome to <br />
+					<span className="text-3xl text-sky-400">
+						Dramalama-Manga
+					</span>
+				</p>
+			</div>
+			<div className="mt-2 w-full lg:w-1/3">
+				<MangaSearchBox />
+			</div>
+		</main>
+	);
+};
+
+export default MangaHomePage;
diff --git a/src/app/movies/components/searchFormatter.jsx b/src/app/movies/components/searchFormatter.jsx
index ded6022..f6a578e 100644
--- a/src/app/movies/components/searchFormatter.jsx
+++ b/src/app/movies/components/searchFormatter.jsx
@@ -1,5 +1,3 @@
-"use server";
-
 import { Card, CardHeader, CardBody } from "@nextui-org/react";
 import Image from "next/image";
 import Link from "next/link";
@@ -8,7 +6,7 @@ import styles from "../../page.module.css";
 const MovieSearchFormatter = async (data) => {
 	return (
 		<section
-			className={`flex items-center overflow-auto pb-2 mb-2 ${styles.ScrollBarAdjuster}`}
+			className={`mb-2 flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
 		>
 			{data &&
 				data.results.map((item, index) => {
@@ -18,7 +16,7 @@ const MovieSearchFormatter = async (data) => {
 								key={index}
 								href={`/movies/${item.id}`}
 								aria-label="anime redirection links"
-								className="flex flex-col items-center mx-1 "
+								className="mx-1 flex flex-col items-center"
 							>
 								<Card className="overflow-hidden" isPressable>
 									<CardBody>
@@ -27,13 +25,13 @@ const MovieSearchFormatter = async (data) => {
 											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
 											width={190}
 											height={120}
-											className="rounded-md h-64"
+											className="h-64 rounded-md"
 											priority
 										/>
 									</CardBody>
 									<CardHeader>
 										<h4
-											className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+											className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}
 										>
 											{item.original_title}
 										</h4>
diff --git a/src/app/movies/components/videoPlayer.jsx b/src/app/movies/components/videoPlayer.jsx
index b7cdd81..154d633 100644
--- a/src/app/movies/components/videoPlayer.jsx
+++ b/src/app/movies/components/videoPlayer.jsx
@@ -2,7 +2,7 @@ const MovieVideoPlayer = async ({ id: id }) => {
 	const videoFrameGenerator = (id) => {
 		return (
 			<iframe
-				src={`https://vidsrc.pro/embed/movie/${id}`}
+				src={`https://vidsrc.pro/embed/movie/${id}?player=new`}
 				allowFullScreen
 				referrerPolicy="origin"
 				height={720}
diff --git a/src/app/movies/page.jsx b/src/app/movies/page.jsx
index 417df28..a0b8963 100644
--- a/src/app/movies/page.jsx
+++ b/src/app/movies/page.jsx
@@ -20,10 +20,10 @@ export default async function MovieHomepage() {
 	const dataFormatter = (title, data) => {
 		return (
 			<section className="flex flex-col">
-				<p className="text-sky-400 text-2xl font-bold">{title}</p>
+				<p className="text-2xl font-bold text-sky-400">{title}</p>
 
 				<div
-					className={`flex items-center overflow-auto pb-2 mt-1 ${styles.ScrollBarAdjuster}`}
+					className={`mt-1 flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
 				>
 					{data &&
 						data.results.map((item, index) => (
@@ -31,22 +31,22 @@ export default async function MovieHomepage() {
 								key={index}
 								href={`/movies/${item.id}`}
 								aria-label="anime redirection links"
-								className="flex flex-col items-center mx-1 "
+								className="mx-1 flex flex-col items-center"
 							>
-								<Card className="overflow-visible " isPressable>
+								<Card className="overflow-visible" isPressable>
 									<CardBody>
 										<Image
 											alt="Movie Poster"
 											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
 											width={270}
 											height={180}
-											className="h-64 rounded-md overflow-hidden"
+											className="h-64 overflow-hidden rounded-md"
 											priority
 										/>
 									</CardBody>
 									<CardHeader>
 										<h4
-											className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+											className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}
 										>
 											{item.original_title}
 										</h4>
@@ -60,7 +60,7 @@ export default async function MovieHomepage() {
 	};
 
 	return (
-		<main className="pt-12 ">
+		<main className="pt-4">
 			<div className="lg:ml-2">
 				<MovieSearchBar />
 			</div>
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 9565872..23a7e74 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,34 +1,11 @@
-import { Card, CardHeader, CardBody, Divider, Link } from "@nextui-org/react";
-import Image from "next/image";
+import { Card, CardBody } from "@nextui-org/react";
+import Link from "next/link";
 
 export default async function Home() {
 	const homePageCards = (title) => {
 		return (
-			// <Link href={`/${title}`} className="my-1">
-			// 	<Card className="max-w-[400px]  border-1 border-gray-500">
-			// 		<CardHeader className="flex gap-3">
-			// 			<Image
-			// 				alt="nextui logo"
-			// 				height={40}
-			// 				width={40}
-			// 				src={url}
-			// 				className="rounded-md"
-			// 			/>
-			// 			<div className="flex flex-col">
-			// 				<p className="text-md">{title}</p>
-			// 				<p className="text-small text-default-500">
-			// 					dramalama/{title}
-			// 				</p>
-			// 			</div>
-			// 		</CardHeader>
-			// 		<Divider className="bg-slate-400" />
-			// 		<CardBody>
-			// 			<p>{message}</p>
-			// 		</CardBody>
-			// 	</Card>
-			// </Link>
-			<Link href={`/${title}`} className="mb-2 lg:mx-1">
-				<Card isPressable shadow="lg">
+			<Link href={`/${title}`} className="focus:scale(90) mb-2 lg:mx-1">
+				<Card isPressable shadow="sm" isHoverable>
 					<CardBody>
 						<p className="text-xl lg:text-2xl">{title}</p>
 					</CardBody>
@@ -38,12 +15,15 @@ export default async function Home() {
 	};
 
 	return (
-		<section className="h-screen w-screen flex flex-col items-center justify-center lg:flex-row ">
-			{homePageCards("anime")}
-			{homePageCards("movies")}
-			{homePageCards("kdrama")}
-			{homePageCards("web-series")}
-		</section>
+		<main>
+			<section className="flex h-[90dvh] w-screen flex-col items-center justify-center lg:flex-row">
+				{homePageCards("anime")}
+				{homePageCards("movies")}
+				{homePageCards("kdrama")}
+				{homePageCards("web-series")}
+				{homePageCards("manga")}
+			</section>
+		</main>
 	);
 }
 
diff --git a/src/app/web-series/[id]/page.jsx b/src/app/web-series/[id]/page.jsx
index 06902b1..f3922de 100644
--- a/src/app/web-series/[id]/page.jsx
+++ b/src/app/web-series/[id]/page.jsx
@@ -18,8 +18,8 @@ const SeriesInfoPage = async ({ params }) => {
 			}}
 			className="h-screen bg-white dark:bg-black"
 		>
-			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-white-400 dark:to-black">
-				<section className="pt-12 m-auto w-full lg:w-9/12">
+			<section className="to-white-400 absolute inset-0 bg-gradient-to-b from-transparent dark:to-black">
+				<section className="m-auto w-full pt-20 lg:w-9/12">
 					<SeriesVideoPlayer id={data.id} />
 					<div className="flex items-center">
 						<Image
@@ -42,7 +42,7 @@ const SeriesInfoPage = async ({ params }) => {
 											key={index}
 											color="warning"
 											variant="faded"
-											className="mr-1 mb-1"
+											className="mb-1 mr-1"
 										>
 											<p className="text-xs">
 												{item.name}
diff --git a/src/app/web-series/components/cacher.js b/src/app/web-series/components/cacher.js
index 3e2a197..a75094e 100644
--- a/src/app/web-series/components/cacher.js
+++ b/src/app/web-series/components/cacher.js
@@ -1,3 +1,5 @@
+"use server";
+
 import { SERIES_INFO } from "./data-fetch";
 
 const PreFecthSeriesInfo = async (data) => {
@@ -11,7 +13,7 @@ const PreFecthSeriesInfo = async (data) => {
 	} catch (error) {
 		console.error(
 			"Error occurred while pre-fetching series info page:",
-			error
+			error,
 		);
 	}
 };
diff --git a/src/app/web-series/components/search.jsx b/src/app/web-series/components/search.jsx
index ecf392c..492b30e 100644
--- a/src/app/web-series/components/search.jsx
+++ b/src/app/web-series/components/search.jsx
@@ -6,8 +6,6 @@ import { Input, Progress } from "@nextui-org/react";
 import { SEARCH_TV } from "./data-fetch";
 import SeriesSearchFormatter from "./seriesSearchFormatter";
 import PreFecthSeriesInfo from "./cacher";
-// import { SearchMovie } from "./requestsHandler";
-// import MovieSearchFormatter from "./searchFormatter";
 
 const SeriesSearchBar = () => {
 	const [seriesTitle, setSeriesTitle] = useState("");
@@ -21,7 +19,7 @@ const SeriesSearchBar = () => {
 				isIndeterminate
 				aria-label="Loading..."
 				className="w-full"
-			/>
+			/>,
 		);
 		const data = await SEARCH_TV(seriesTitle);
 		PreFecthSeriesInfo(data);
@@ -31,7 +29,7 @@ const SeriesSearchBar = () => {
 
 	return (
 		<section>
-			<div className="flex flex-col w-full md:flex-nowrap gap-2 lg:w-1/2">
+			<div className="flex w-full flex-col gap-2 md:flex-nowrap lg:w-1/2">
 				<Input
 					type="text"
 					label="Search for series"
diff --git a/src/app/web-series/components/seriesSearchFormatter.jsx b/src/app/web-series/components/seriesSearchFormatter.jsx
index ada00fb..3b119d6 100644
--- a/src/app/web-series/components/seriesSearchFormatter.jsx
+++ b/src/app/web-series/components/seriesSearchFormatter.jsx
@@ -1,5 +1,3 @@
-"use server";
-
 import { Card, CardHeader, CardBody } from "@nextui-org/react";
 import Link from "next/link";
 import Image from "next/image";
@@ -9,7 +7,7 @@ import styles from "../../page.module.css";
 const SeriesSearchFormatter = async (data) => {
 	return (
 		<section
-			className={`flex items-center overflow-auto pb-2 mb-2 ${styles.ScrollBarAdjuster}`}
+			className={`mb-2 flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
 		>
 			{data &&
 				data.results.map((item, index) => {
@@ -19,7 +17,7 @@ const SeriesSearchFormatter = async (data) => {
 								key={index}
 								href={`/web-series/${item.id}`}
 								aria-label="anime redirection links"
-								className="flex flex-col items-center mx-1 "
+								className="mx-1 flex flex-col items-center"
 							>
 								<Card className="overflow-hidden" isPressable>
 									<CardBody>
@@ -28,13 +26,13 @@ const SeriesSearchFormatter = async (data) => {
 											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
 											width={190}
 											height={120}
-											className="rounded-md h-64"
+											className="h-64 rounded-md"
 											priority
 										/>
 									</CardBody>
 									<CardHeader>
 										<h4
-											className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+											className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}
 										>
 											{item.name}
 										</h4>
diff --git a/src/app/web-series/components/videoPlayer.jsx b/src/app/web-series/components/videoPlayer.jsx
index 50a703d..49f44f5 100644
--- a/src/app/web-series/components/videoPlayer.jsx
+++ b/src/app/web-series/components/videoPlayer.jsx
@@ -16,11 +16,11 @@ const SeriesVideoPlayer = ({ id: id }) => {
 	const VideoFrameGenerator = (sea, epi) => {
 		return (
 			<iframe
-				src={`https://vidsrc.pro/embed/tv/${id}/${sea}/${epi}`}
+				src={`https://vidsrc.pro/embed/tv/${id}/${sea}/${epi}?player=new`}
 				allowFullScreen
 				referrerPolicy="origin"
 				height={720}
-				className="w-full h-[240px] lg:h-[720px]"
+				className="h-[240px] w-full rounded-md lg:h-[720px]"
 			></iframe>
 		);
 	};
@@ -28,7 +28,7 @@ const SeriesVideoPlayer = ({ id: id }) => {
 	function renderVideoFrame() {
 		if (seasonNumber === "" || episodeNumber === "") {
 			alert(
-				"Make sure that you have entered the episode number and the season number."
+				"Make sure that you have entered the episode number and the season number.",
 			);
 			return;
 		}
@@ -39,7 +39,7 @@ const SeriesVideoPlayer = ({ id: id }) => {
 	return (
 		<div>
 			{videoFrame}
-			<div className="flex w-full items-center md:flex-nowrap gap-2 mt-2">
+			<div className="mt-2 flex w-full items-center gap-2 md:flex-nowrap">
 				<Input
 					type="number"
 					label="Season"
diff --git a/src/app/web-series/page.jsx b/src/app/web-series/page.jsx
index 1adac80..f9e0b57 100644
--- a/src/app/web-series/page.jsx
+++ b/src/app/web-series/page.jsx
@@ -25,10 +25,10 @@ const SeriesHomepage = async () => {
 	const HomepageDataFormatter = (title, data) => {
 		return (
 			<section className="flex flex-col">
-				<p className="text-sky-400 text-2xl font-bold">{title}</p>
+				<p className="text-2xl font-bold text-sky-400">{title}</p>
 
 				<div
-					className={`flex items-center overflow-auto pb-2 mt-1 ${styles.ScrollBarAdjuster}`}
+					className={`mt-1 flex items-center overflow-auto pb-2 ${styles.ScrollBarAdjuster}`}
 				>
 					{data &&
 						data.results.map((item, index) => (
@@ -36,22 +36,22 @@ const SeriesHomepage = async () => {
 								key={index}
 								href={`/web-series/${item.id}`}
 								aria-label="anime redirection links"
-								className="flex flex-col items-center mx-1 "
+								className="mx-1 flex flex-col items-center"
 							>
-								<Card className="overflow-visible " isPressable>
+								<Card className="overflow-visible" isPressable>
 									<CardBody>
 										<Image
 											alt="Movie Poster"
 											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
 											width={270}
 											height={180}
-											className="h-64 rounded-md overflow-hidden"
+											className="h-64 overflow-hidden rounded-md"
 											priority
 										/>
 									</CardBody>
 									<CardHeader>
 										<h4
-											className={`antialiased  text-small text-center uppercase w-44 overflow-hidden whitespace-nowrap text-ellipsis `}
+											className={`w-44 overflow-hidden text-ellipsis whitespace-nowrap text-center text-small uppercase antialiased`}
 										>
 											{item.name}
 										</h4>
@@ -65,7 +65,7 @@ const SeriesHomepage = async () => {
 	};
 
 	return (
-		<section className="pt-12">
+		<section className="pt-4">
 			<div className="lg:ml-1">
 				<SeriesSearchBar />
 			</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index ad61c55..f7d82ce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,5 +17,28 @@ module.exports = {
 		extend: {},
 	},
 	darkMode: "class",
-	plugins: [nextui()],
+	plugins: [
+		nextui({
+			themes: {
+				light: {
+					colors: {
+						background: "#FFFFFF", // or DEFAULT
+						foreground: "#11181C", // or 50 to 900 DEFAULT
+						primary: {
+							//... 50 to 900
+							foreground: "#FFFFFF",
+							DEFAULT: "#006FEE",
+						},
+					},
+				},
+
+				dark: {
+					colors: {
+						background: "#1f1f1f", // or DEFAULT
+						foreground: "#ECEDEE", // or 50 to 900 DEFAULT
+					},
+				},
+			},
+		}),
+	],
 };
diff --git a/utils/manga_urls.js b/utils/manga_urls.js
new file mode 100644
index 0000000..f45f275
--- /dev/null
+++ b/utils/manga_urls.js
@@ -0,0 +1,15 @@
+import { PROXY } from "./movie_urls";
+
+const base_url = `https://consumet-jade.vercel.app/meta/anilist-manga/`;
+
+export const manga_search_url = (title) => {
+	return `${base_url}${title}`;
+};
+
+export const manga_info_url = (id) => {
+	return `${base_url}info/${id}?provider=mangadex`;
+};
+
+export const manga_chapters_pages = (id) => {
+	return `https://api.mangadex.org/at-home/server/${id}`;
+};