feature added: mangas are now available

23 files changed, 828 insertions, 8 deletions

diff --git a/.gitignore b/.gitignore
index 8460eea..d7beb48 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,4 @@ yarn-error.log*
 next-env.d.ts
 
 .vercel
+/src/app/manga/.URLs.txt
\ No newline at end of file
diff --git a/next.config.mjs b/next.config.mjs
index 1ac477c..fc47e34 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -19,6 +19,22 @@ const nextConfig = {
 				protocol: "https",
 				hostname: "asianimg.pro",
 			},
+			{
+				protocol: "https",
+				hostname: "s4.anilist.co",
+			},
+			{
+				protocol: "https",
+				hostname: "uploads.mangadex.org",
+			},
+			{
+				protocol: "https",
+				hostname: "cros.shashstorm.in",
+			},
+			{
+				protocol: "https",
+				hostname: "image-proxy-manga.vercel.app",
+			},
 		],
 	},
 	logging: {
diff --git a/public/haikyu1.jpg b/public/haikyu1.jpg
new file mode 100644
index 0000000..b5af3c3
--- /dev/null
+++ b/public/haikyu1.jpg
diff --git a/public/image.png b/public/image.png
new file mode 100644
index 0000000..789b35b
--- /dev/null
+++ b/public/image.png
diff --git a/public/layered.svg b/public/layered.svg
new file mode 100644
index 0000000..00b82de
--- /dev/null
+++ b/public/layered.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 260" width="960" height="260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 62L17.8 57C35.7 52 71.3 42 106.8 39.5C142.3 37 177.7 42 213.2 43.2C248.7 44.3 284.3 41.7 320 39.8C355.7 38 391.3 37 426.8 35.2C462.3 33.3 497.7 30.7 533.2 35.5C568.7 40.3 604.3 52.7 640 56.7C675.7 60.7 711.3 56.3 746.8 54.2C782.3 52 817.7 52 853.2 55.7C888.7 59.3 924.3 66.7 942.2 70.3L960 74L960 0L942.2 0C924.3 0 888.7 0 853.2 0C817.7 0 782.3 0 746.8 0C711.3 0 675.7 0 640 0C604.3 0 568.7 0 533.2 0C497.7 0 462.3 0 426.8 0C391.3 0 355.7 0 320 0C284.3 0 248.7 0 213.2 0C177.7 0 142.3 0 106.8 0C71.3 0 35.7 0 17.8 0L0 0Z" fill="#0066FF" stroke-linecap="round" stroke-linejoin="miter"></path></svg>
\ No newline at end of file
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/solo_levelling.png b/public/solo_levelling.png
new file mode 100644
index 0000000..62d5f87
--- /dev/null
+++ b/public/solo_levelling.png
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 42eb9ad..a76fc50 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -34,6 +34,7 @@ body::-webkit-scrollbar {
 .rightNav {
 	display: flex;
 	cursor: pointer;
+	overflow-x: auto;
 }
 
 .rightNav a {
diff --git a/src/app/header/header.jsx b/src/app/header/header.jsx
index bc4a019..22798b4 100644
--- a/src/app/header/header.jsx
+++ b/src/app/header/header.jsx
@@ -8,17 +8,20 @@ export default function Header() {
 					href="/"
 					style={{ color: "black", textDecoration: "none" }}
 				>
-					<p style={{ fontSize: "30px", color: "var(--pastel-red)" }}>
+					<p style={{ fontSize: "26px", color: "var(--pastel-red)" }}>
 						Dramalama
 					</p>
 				</Link>
 				<div className="rightNav">
-					<Link href="/kdrama">
-						<p>Kdrama</p>
-					</Link>
 					<Link href="/anime">
 						<p>Anime</p>
 					</Link>
+					<Link href="/manga">
+						<p>Manga</p>
+					</Link>
+					<Link href="/kdrama">
+						<p>Kdrama</p>
+					</Link>
 				</div>
 			</div>
 			<hr style={{ marginTop: "-3px" }} />
diff --git a/src/app/manga/Manga.jsx b/src/app/manga/Manga.jsx
new file mode 100644
index 0000000..c4a0410
--- /dev/null
+++ b/src/app/manga/Manga.jsx
@@ -0,0 +1,63 @@
+import styles from "./manga.module.css";
+import Image from "next/image";
+
+export default async function Manga() {
+	return (
+		<div className={styles.Main}>
+			<div className={styles.Hero}>
+				<div className={styles.WelcomeContainer}>
+					<div className={styles.WelcomeText}>
+						Manga madness is here
+					</div>
+					<button>Let's Start</button>
+				</div>
+				<div className={styles.ImageContainer}>
+					<div className={styles.HorizontalImageContainer}>
+						<Image
+							src="/image.png"
+							width={480}
+							height={260}
+							alt="Haikyu"
+						/>
+					</div>
+					<div className={styles.VerticalImageContainer}>
+						<Image
+							src="/haikyu1.jpg"
+							width={240}
+							height={360}
+							alt="Haikyu"
+						/>
+						<Image
+							src="/solo_levelling.png"
+							width={240}
+							height={360}
+							alt="Haikyu"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div className={styles.SelfPromoContainer}>
+				<div className={styles.Welcome1}>
+					<h2 style={{ textAlign: "center" }}>
+						Welcome to Dramalama Manga
+					</h2>
+					<p>
+						Dive into a world where action jumps off the page and
+						pictures paint a thousand words. Manga Universe is a
+						site that will immerse you in stunning illustrations and
+						compel you to lose yourself in thrilling narratives.
+					</p>
+				</div>
+				<div className={styles.ChooseusContainer}>
+					<h2 style={{ textAlign: "center" }}>Why choose us?</h2>
+					<p>
+						Our platform is built by manga enthusiasts, for manga
+						enthusiasts. That means high quality scans, an extensive
+						series catalogue, and regular series updates.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
new file mode 100644
index 0000000..a90d170
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -0,0 +1,51 @@
+import styles from "./read.module.css";
+import Image from "next/image";
+
+export default async function Read({ params }) {
+	const chapterId = params.read;
+	const data = await getPages(chapterId);
+	if (data.length === 0) {
+		return (
+			<div className={styles.NotFound}>
+				<p>
+					This chapter has no content. Please check the next chapter.
+				</p>
+			</div>
+		);
+	}
+
+	let images = [];
+	for (var i = 0; i < data.length; i++) {
+		var imgUrl = data[i].img;
+		images.push(imgUrl);
+	}
+
+	return (
+		<div className={styles.Main}>
+			<div className={styles.ImageContainer}>
+				{images &&
+					images.map((item, index) => (
+						<div className={styles.Image}>
+							<Image
+								src={`https://image-proxy-manga.vercel.app/image-proxy?url=${item}`}
+								key={index}
+								alt="Pages"
+								width={800}
+								height={1000}
+								priority
+							/>
+							<p>{index + 1}</p>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+}
+
+async function getPages(id) {
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${id}&provider=mangadex`
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
new file mode 100644
index 0000000..3a8c99f
--- /dev/null
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -0,0 +1,43 @@
+.ImageContainer img {
+	width: auto;
+	height: auto;
+	border-radius: 5px;
+	margin-top: 10px;
+
+}
+
+.Image {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: #1b1b1b;
+	border-radius: 10px;
+	width: auto;
+	margin-top: 10px;
+}
+
+.ImageContainer p {
+	text-align: center;
+	color: white;
+	font-family: "Kanit";
+	font-size: 16px;
+	margin: 5px;
+}
+
+.NotFound {
+	text-align: center;
+	color: white;
+	font-family: "Atkinson Hyperlegible";
+	font-size: 20px;
+}
+
+@media screen and (max-width: 768px) {
+	.ImageContainer img {
+		width: 90%;
+		align-items: center;
+	}
+
+	.Image {
+		width: 100%;
+	}
+}
\ No newline at end of file
diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
new file mode 100644
index 0000000..07fe3c3
--- /dev/null
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -0,0 +1,28 @@
+import styles from "./info.module.css";
+import Link from "next/link";
+
+export default async function Buttons({ content: data }) {
+	return (
+		<div className={styles.ChapterContainer}>
+			{data.chapters &&
+				data.chapters.map((item, index) => {
+					if (item.pages !== 0) {
+						return (
+							<Link
+								href={{
+									pathname: `/manga/info/read/${item.id}`,
+									query: {
+										name: item.title,
+									},
+								}}
+							>
+								<button key={index}>
+									{item.volumeNumber} - {item.chapterNumber}
+								</button>
+							</Link>
+						);
+					}
+				})}
+		</div>
+	);
+}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
new file mode 100644
index 0000000..99ea636
--- /dev/null
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -0,0 +1,135 @@
+.MangaInfoContainer {
+	max-width: 90%;
+	margin: 0px auto;
+}
+
+.MangaHero {
+	display: flex;
+	flex-direction: column;
+}
+
+.HeroImage {
+	width: 100%;
+	height: auto;
+	max-height: 550px;
+	border-radius: 10px;
+}
+
+.TitleContainer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 10px;
+}
+
+.TitleContainer p {
+	font-family: "Lato";
+	font-size: 32px;
+}
+
+.TitleContainer img {
+	border-radius: 10px;
+}
+
+.MangaDescription {
+	color: white;
+	font-family: "Atkinson Hyperlegible";
+	text-align: center;
+}
+
+.MangaDescription span {
+	margin: 10px;
+	color: var(--soft-purple);
+}
+
+.MangaRatings {
+	color: var(--light-green);
+}
+
+.MangaGenre {
+	background-color: #5f5f5f5d;
+	padding: 2px;
+	border-radius: 5px;
+	cursor: pointer;
+}
+
+.Character {
+	display: flex;
+	flex-direction: row;
+	overflow-x: auto;
+}
+
+.Character::-webkit-scrollbar {
+	height: 5px;
+}
+
+.Character::-webkit-scrollbar-thumb {
+	background-color: #949494;
+	border-radius: 5px;
+}
+
+.Character::-webkit-scrollbar-track {
+	background-color: rgb(87, 87, 87);
+	border-radius: 5px;
+}
+
+.CharacterEntry {
+	margin: 5px;
+}
+
+.CharacterEntry p {
+	text-align: center;
+	color: white;
+}
+
+.CharacterEntry img {
+	border-radius: 10px;
+}
+
+/* Chapters Buttons */
+.ChapterContainer {
+	width: 95%;
+	margin: 20px auto;
+	text-align: center;
+	height: 400px;
+	overflow-y: auto;
+}
+
+.ChapterContainer::-webkit-scrollbar {
+	width: 5px;
+}
+
+.ChapterContainer::-webkit-scrollbar-thumb {
+	background-color: #949494;
+	border-radius: 5px;
+}
+
+.ChapterContainer::-webkit-scrollbar-track {
+	background-color: rgb(66, 66, 66);
+	border-radius: 5px;
+}
+
+.ChapterContainer button {
+	width: 100px;
+	padding: 10px;
+	margin: 5px;
+	border-radius: 5px;
+	font-size: 16px;
+	border: none;
+	outline: none;
+	font-family: "Lato";
+	background-color: #41C9E2;
+	cursor: pointer;
+	transition: transform 0.2s linear;
+
+}
+
+.ChapterContainer button:hover {
+	background-color: var(--neon-green);
+}
+
+.ChapterContainer button:focus {
+	opacity: 0.6;
+	transition: transform 0.2s linear;
+	transform: scale(0.9);
+}
\ No newline at end of file
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
new file mode 100644
index 0000000..b41f719
--- /dev/null
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -0,0 +1,102 @@
+import styles from "./info.module.css";
+import Image from "next/image";
+import Buttons from "./buttons";
+
+export default async function MangaInfo({ params }) {
+	const id = params.id;
+	const data = await getMangaInfo(id);
+
+	return (
+		<div className={styles.MangaInfoContainer}>
+			{data && (
+				<div className={styles.MangaInfo}>
+					<div className={styles.MangaHero}>
+						<Image
+							src={data.cover}
+							width={1730}
+							height={400}
+							alt="Cover Poster"
+							className={styles.HeroImage}
+							priority
+						/>
+						<div className={styles.TitleContainer}>
+							<p style={{ color: data.color }}>
+								{data.title["romaji"]}
+							</p>
+							<Image
+								src={data.image}
+								width={200}
+								height={310}
+								alt="Manga Poster"
+								priority
+							/>
+						</div>
+					</div>
+
+					<div className={styles.MangaDescription}>
+						<p>{data.description.split("<br")[0]}</p>
+						<span className={styles.MangaReleaseYear}>
+							Released in: {data.releaseDate}
+						</span>
+						<span>
+							Started on: {data.startDate["day"]}-
+							{data.startDate["month"]}-{data.startDate["year"]}
+						</span>
+						<span>
+							Ended on: {data.endDate["day"]}-
+							{data.endDate["month"]}-{data.endDate["year"]}
+						</span>
+						<p className={styles.MangaRatings}>
+							Ratings: {data.rating / 10}
+						</p>
+						<p style={{ color: "#7ED7C1" }}>
+							Genres:
+							{data.genres &&
+								data.genres.map((item, index) => (
+									<span
+										key={index}
+										className={styles.MangaGenre}
+										style={{ color: data.color, margin: 5 }}
+									>
+										{item}
+									</span>
+								))}
+						</p>
+					</div>
+
+					<div className={styles.CharactersContainer}>
+						<div className={styles.Character}>
+							{data.characters &&
+								data.characters.map((item, index) => (
+									<div
+										key={index}
+										className={styles.CharacterEntry}
+									>
+										<Image
+											src={item.image}
+											width={140}
+											height={200}
+											alt="Character Poster"
+										/>
+										<p>
+											{item.name.full} ({item.role})
+										</p>
+									</div>
+								))}
+						</div>
+					</div>
+
+					<Buttons content={data} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+async function getMangaInfo(id) {
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/meta/anilist-manga/info/${id}?provider=mangadex`
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx
new file mode 100644
index 0000000..92c2897
--- /dev/null
+++ b/src/app/manga/[title]/page.jsx
@@ -0,0 +1,74 @@
+import styles from "./title.module.css";
+import Image from "next/image";
+import Link from "next/link";
+
+export default async function MangaInfo({ params }) {
+	const title = params.title;
+	const data = await GetSearchedAnime(title);
+
+	return (
+		<div className={styles.Main}>
+			<div className={styles.MangaContainer}>
+				{title && (
+					<div className={styles.SearchedFor}>
+						<p>Searched for: {decodeURIComponent(title)}</p>
+					</div>
+				)}
+				{data &&
+					data.results.map(async (item, index) => {
+						let desc = item.description || ""; // Ensure desc is not null
+						if (desc === "") {
+							desc = "Not found"; // If desc is empty, set it to "Not found"
+						}
+						return (
+							<Link
+								href={`./info/${item.id}`}
+								style={{ textDecoration: "none" }}
+								key={index}
+							>
+								<div className={styles.MangaEntries}>
+									<Image
+										src={item.image}
+										width={140}
+										height={240}
+										alt="Manga Poster"
+										style={{ borderRadius: 10 }}
+									/>
+									<div className={styles.MangaInfo}>
+										<p className={styles.MangaTitle}>
+											{item.title["romaji"]},{" "}
+											{item.title["english"]},{" "}
+											{item.title["native"]}
+										</p>
+										<p className={styles.MangaDescription}>
+											{desc.includes &&
+											desc.includes("<br")
+												? desc.split("<b")[0]
+												: desc}
+										</p>
+										<p className={styles.MangaStatus}>
+											{item.status}
+										</p>
+										<p className={styles.MangaChapters}>
+											Chapters: {item.totalChapters}
+										</p>
+										<p className={styles.MangaVolume}>
+											Volumes: {item.volumes}
+										</p>
+									</div>
+								</div>
+							</Link>
+						);
+					})}
+			</div>
+		</div>
+	);
+}
+
+async function GetSearchedAnime(title) {
+	const res = await fetch(
+		"https://consumet-api-di2e.onrender.com/meta/anilist-manga/" + title
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
new file mode 100644
index 0000000..eef08ba
--- /dev/null
+++ b/src/app/manga/[title]/title.module.css
@@ -0,0 +1,61 @@
+.Main {
+	max-width: 90%;
+	margin: 0px auto;
+}
+
+.MangaContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.SearchedFor {
+	color: white;
+	text-align: center;
+	font-family: "Kanit";
+	font-size: 26px;
+}
+
+.MangaEntries {
+	display: flex;
+	flex-direction: row;
+	margin: 10px;
+	padding: 10px;
+	border-style: dotted;
+	border-color: #363636 #474747;
+	border-radius: 10px;
+	border-width: 4px;
+	align-items: center;
+	cursor: pointer;
+	transition: transform 0.2s linear;
+}
+
+.MangaEntries:hover {
+	transition: transform 0.2s linear;
+	transform: scale(1.01);
+	border-color: #535353 #686868;
+
+}
+
+.MangaInfo {
+	color: white;
+	margin-left: 20px;
+}
+
+.MangaTitle {
+	font-family: "Lato";
+	margin: 0px;
+	font-size: 22px;
+	color: var(--neon-green);
+}
+
+.MangaStatus {
+	color: var(--soft-purple);
+}
+
+.MangaVolume {
+	color: #FFACAC;
+}
+
+.MangaChapters {
+	color: #FFEBB4
+}
\ No newline at end of file
diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
new file mode 100644
index 0000000..7e4a5ba
--- /dev/null
+++ b/src/app/manga/manga.module.css
@@ -0,0 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Inter&display=swap');
+
+.Main {
+	max-width: 90%;
+	margin: 10px auto;
+}
+
+.Hero {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.ImageContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.ImageContainer img {
+	margin: 0px 4px 4px 4px;
+	border-radius: 8px;
+	animation: zoomer 1s alternate-reverse infinite ease;
+}
+
+@keyframes zoomer {
+	to {
+		transform: scale(1.01);
+	}
+}
+
+.WelcomeContainer button {
+	font-family: "Inter";
+	font-size: 16px;
+	margin-top: 8px;
+	padding: 6px;
+	border-radius: 5px;
+	border: none;
+	outline: none;
+	background-color: var(--neon-green);
+	cursor: pointer;
+}
+
+.WelcomeText {
+	font-family: "Kanit";
+	color: white;
+	font-size: 50px;
+	text-shadow: #FC0 2px 2px 50px;
+	margin-right: 10px;
+}
+
+
+.SelfPromoContainer {
+	display: flex;
+	justify-content: space-around;
+	font-family: "Lato";
+	color: white;
+	/* margin-top: 20px; */
+}
+
+.SelfPromoContainer p {
+	font-family: "Quicksand";
+	color: white;
+	text-align: center;
+}
+
+
+@media screen and (max-width: 1024px) {
+
+	.HorizontalImageContainer img {
+		width: auto;
+		height: auto;
+	}
+
+	.VerticalImageContainer img {
+		width: 265px;
+	}
+}
+
+@media screen and (max-width: 768px) {
+
+	.HorizontalImageContainer img {
+		width: 95%;
+		height: auto;
+	}
+
+	.VerticalImageContainer img {
+		width: 46.5%;
+		height: 300px;
+	}
+}
+
+.SearchBar {
+	display: flex;
+	align-items: center;
+	border-radius: 4px;
+	background: #1f1f1f;
+	margin-top: 5px;
+	width: 55%;
+}
+
+.SearchBar input {
+	background: none;
+	outline: none;
+	border: none;
+	margin-left: 5px;
+	padding: 4px;
+	width: 100%;
+	color: white;
+	font-family: "Kanit";
+	font-size: 16px;
+}
+
+@media screen and (max-width: 425px) {
+
+	.Hero {
+		flex-direction: column;
+	}
+
+	.WelcomeContainer {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		margin-bottom: 10px;
+	}
+
+	.WelcomeText {
+		font-size: 32px;
+	}
+
+	.HorizontalImageContainer img {
+		margin-top: 20px;
+		width: 100%;
+		height: auto;
+	}
+
+	.VerticalImageContainer img {
+		display: none;
+	}
+
+	.SearchBar {
+		width: 80%;
+	}
+}
+
+/* Search Bar from searchBar.jsx */
\ No newline at end of file
diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx
new file mode 100644
index 0000000..7f1f9cb
--- /dev/null
+++ b/src/app/manga/page.jsx
@@ -0,0 +1,62 @@
+import styles from "./manga.module.css";
+import Image from "next/image";
+import SearchBar from "./searchBar";
+
+export default async function Manga() {
+	return (
+		<div className={styles.Main}>
+			<div className={styles.Hero}>
+				<div className={styles.WelcomeContainer}>
+					<div className={styles.WelcomeText}>
+						Manga madness is here
+					</div>
+					<SearchBar />
+				</div>
+				<div className={styles.ImageContainer}>
+					<div className={styles.HorizontalImageContainer}>
+						<Image
+							src="/image.png"
+							width={480}
+							height={260}
+							alt="Haikyu"
+						/>
+					</div>
+					<div className={styles.VerticalImageContainer}>
+						<Image
+							src="/haikyu1.jpg"
+							width={240}
+							height={360}
+							alt="Haikyu"
+						/>
+						<Image
+							src="/solo_levelling.png"
+							width={240}
+							height={360}
+							alt="Haikyu"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div className={styles.SelfPromoContainer}>
+				<div className={styles.Welcome1}>
+					<p
+						style={{
+							textAlign: "center",
+							fontSize: 32,
+							color: "var(--soft-purple)",
+						}}
+					>
+						Welcome to Dramalama Manga
+					</p>
+					<p>
+						Dive into a world where action jumps off the page and
+						pictures paint a thousand words. Dramalama Manga is a
+						site that will immerse you in stunning illustrations and
+						compel you to lose yourself in thrilling narratives.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/manga/searchBar.jsx b/src/app/manga/searchBar.jsx
new file mode 100644
index 0000000..fa0962a
--- /dev/null
+++ b/src/app/manga/searchBar.jsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { FaSearch } from "react-icons/fa";
+import styles from "./manga.module.css";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
+export default function SearchBar() {
+	const router = useRouter();
+
+	const [title, setMangaTitle] = useState("");
+
+	return (
+		<div className={styles.SearchBar}>
+			<FaSearch color="white" style={{ marginLeft: 5 }} />
+			<input
+				type="text"
+				name="manga"
+				placeholder="Enter manga title"
+				autoComplete="off"
+				onChange={(e) => setMangaTitle(e.target.value)}
+				onKeyDown={(event) => {
+					if (
+						(event.key === "Enter" ||
+							event.code === 13 ||
+							event.code === "Enter") &&
+						title !== ""
+					) {
+						router.push(`/manga/${title}`);
+					}
+				}}
+			></input>
+		</div>
+	);
+}
diff --git a/src/app/page.module.css b/src/app/page.module.css
index c8bd07e..9e8ddad 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -3,7 +3,7 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	height: 90dvh;
+	height: 85dvh;
 	max-width: 500px;
 	margin: 0px auto;
 	text-align: center;
diff --git a/src/app/video/[animeId]/page.jsx b/src/app/video/[animeId]/page.jsx
index cfa8cd5..c0339f7 100644
--- a/src/app/video/[animeId]/page.jsx
+++ b/src/app/video/[animeId]/page.jsx
@@ -48,7 +48,8 @@ export default async function Video({ params }) {
 
 async function getVideoLink(id) {
 	const res = await fetch(
-		"https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id
+		"https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id,
+		{ next: { revalidate: 3600 } } // Video links are revalidated after an hour
 	);
 	const data = res.json();
 	return data;