prolly the last update to dramalama.

22 files changed, 145 insertions, 149 deletions

diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index aa1e044..e8bfc54 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -7,7 +7,7 @@
 	display: flex;
 	flex-direction: column;
 	width: 98%;
-	margin: 0px auto;
+	margin: 80px auto;
 }
 
 .titleContainer {
@@ -19,9 +19,9 @@
 .titleContainer p {
 	color: var(--neon-green);
 	width: 60%;
-	font-family: "Quicksand";
-	font-weight: 1000;
-	font-size: 28px;
+	font-family: "Poppins";
+	font-weight: 500;
+	font-size: 34px;
 }
 
 .titleContainer img {
diff --git a/src/app/anime/anime.module.css b/src/app/anime/anime.module.css
index 3e84530..15695be 100644
--- a/src/app/anime/anime.module.css
+++ b/src/app/anime/anime.module.css
@@ -1,4 +1,4 @@
 .Main {
 	max-width: 95%;
-	margin: 0px auto;
+	margin: 100px auto;
 }
\ No newline at end of file
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index a7a96c2..3f893d1 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -8,7 +8,6 @@ export default async function Anime() {
 		<div className={styles.Main}>
 			<Input />
 			<Trending />
-			<br />
 			<Releases />
 		</div>
 	);
diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index a5e3a05..2bf4e86 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -1,7 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
 import styles from "./recent.module.css";
-import { MdRecentActors } from "react-icons/md";
 
 export default async function Releases() {
 	const data = await fetchRecentEpisodes();
@@ -10,9 +9,6 @@ export default async function Releases() {
 		<div className="trendingContainer">
 			<div className={styles.RecentText}>
 				<p>Recent Releases</p>
-				<span>
-					<MdRecentActors size={26} color="aqua" />
-				</span>
 			</div>
 
 			<div className={styles.Recent}>
diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
index 658d006..f9d5161 100644
--- a/src/app/anime/recent/recent.module.css
+++ b/src/app/anime/recent/recent.module.css
@@ -4,7 +4,7 @@
 }
 
 .RecentText p {
-	font-size: 26px;
+	font-size: 28px;
 	margin: 5px;
 	color: var(--soft-purple);
 	font-family: "Poppins";
diff --git a/src/app/anime/search/search.css b/src/app/anime/search/search.css
index b77bc8b..0a89a68 100644
--- a/src/app/anime/search/search.css
+++ b/src/app/anime/search/search.css
@@ -1,8 +1,3 @@
-.inputContainer {
-	display: flex;
-	margin: 30px auto;
-}
-
 .waitWhileLoading {
 	font-size: 18px;
 	font-family: "Kanit";
@@ -24,11 +19,11 @@
 .searchContainer {
 	display: flex;
 	align-items: center;
-	margin: 0px auto;
+	margin: 20px 0px 20px 0px;
 	background-color: #2c2c2c;
 	padding: 8px;
 	border-radius: 5px;
-	width: 20%;
+	width: 30%;
 }
 
 .searchIcon {
@@ -42,7 +37,7 @@
 }
 
 .animeEntry::-webkit-scrollbar {
-	height: 7px;
+	height: 5px;
 }
 
 .animeEntry::-webkit-scrollbar-track {
@@ -63,7 +58,7 @@
 	padding: 10px;
 	border-style: dotted;
 	border-color: #636363;
-	margin: 10px;
+	margin: 10px 10px 0px 0px;
 	border-radius: 10px;
 	border-width: 4px;
 }
@@ -84,4 +79,4 @@
 	.searchContainer {
 		width: 70%;
 	}
-}
+}
\ No newline at end of file
diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index a6e1efc..898b766 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -1,7 +1,6 @@
 import styles from "./trending.module.css";
 import Image from "next/image";
 import Link from "next/link";
-import { HiTrendingUp } from "react-icons/hi";
 
 export default async function Trending() {
 	const data = await test();
@@ -10,9 +9,6 @@ export default async function Trending() {
 		<div className="trendingContainer">
 			<div className={styles.TrendingText}>
 				<p>Trending</p>
-				<span>
-					<HiTrendingUp size={26} color="aqua" />
-				</span>
 			</div>
 
 			<div className={styles.trending}>
diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index f94dc58..c3c55c5 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -4,7 +4,7 @@
 }
 
 .TrendingText p {
-	font-size: 26px;
+	font-size: 28px;
 	margin: 5px;
 	color: var(--soft-purple);
 	font-family: "Poppins";
diff --git a/src/app/components/footer/footer.module.css b/src/app/components/footer/footer.module.css
index 8b1b7b6..8c70b62 100644
--- a/src/app/components/footer/footer.module.css
+++ b/src/app/components/footer/footer.module.css
@@ -3,7 +3,7 @@
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	background-color: #1a1a1a;
+	background-color: #121212;
 	display: flex;
 	padding: 10px;
 	justify-content: space-between;
diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx
index b105bb6..bd8c389 100644
--- a/src/app/components/header/header.jsx
+++ b/src/app/components/header/header.jsx
@@ -26,7 +26,6 @@ export default function Header() {
 					</Link>
 				</div>
 			</div>
-			<hr style={{ marginTop: "-3px" }} />
 		</div>
 	);
 }
diff --git a/src/app/components/header/header.module.css b/src/app/components/header/header.module.css
index 5ff32fd..da92d47 100644
--- a/src/app/components/header/header.module.css
+++ b/src/app/components/header/header.module.css
@@ -1,3 +1,10 @@
+.headMain {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	background-color: #121212;
+}
+
 .headNav {
 	display: flex;
 	flex-direction: row;
diff --git a/src/app/globals.module.css b/src/app/globals.module.css
index 983f1dd..dd29ada 100644
--- a/src/app/globals.module.css
+++ b/src/app/globals.module.css
@@ -3,7 +3,7 @@
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
-	height: 90dvh;
+	height: 100dvh;
 	color: white;
 	font-family: "Kanit";
 	font-size: 20px;
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 456b9cd..3d9966e 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -1,6 +1,6 @@
 .Main {
 	max-width: 95%;
-	margin: 0px auto;
+	margin: 100px auto;
 }
 
 .TitleContainer {
diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css
index 3e84530..15695be 100644
--- a/src/app/kdrama/styles/kdrama.module.css
+++ b/src/app/kdrama/styles/kdrama.module.css
@@ -1,4 +1,4 @@
 .Main {
 	max-width: 95%;
-	margin: 0px auto;
+	margin: 100px auto;
 }
\ No newline at end of file
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index ac16247..6cb8c6a 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -2,6 +2,7 @@ import { Inter } from "next/font/google";
 import styles from "./globals.module.css";
 import "./globals.css";
 import Header from "./components/header/header";
+import Footer from "./components/footer/page";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Analytics } from "@vercel/analytics/react";
 
@@ -19,7 +20,8 @@ export default function RootLayout({ children }) {
 			<body className={inter.className}>
 				<SpeedInsights />
 				<Analytics />
-				{/* <Header /> */}
+				<Header />
+				<Footer />
 				{children}
 			</body>
 		</html>
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index a95dcfe..1d57d1c 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -1,3 +1,7 @@
+.Main {
+	margin: 80px auto;
+}
+
 .Image {
 	display: flex;
 	flex-direction: column;
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 96635e3..b827249 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -1,3 +1,7 @@
+.MangaInfoContainer {
+	margin: 70px auto;
+}
+
 .MangaHero {
 	display: flex;
 	flex-direction: column;
@@ -28,31 +32,53 @@
 .MangaDescription {
 	color: white;
 	font-family: "Atkinson Hyperlegible";
-	text-align: center;
+	max-width: 98%;
+	margin: -10px auto;
 }
 
-.MangaDescription span {
-	margin: 10px;
-	color: var(--soft-purple);
+.Description h2 {
+	font-family: "Poppins";
+	color: gray;
 }
 
-.MangaRatings {
-	display: flex;
-	justify-content: center;
+.Description p {
 	margin-top: -10px;
 }
 
-.MangaRatings span {
-	margin-right: 2px;
-	margin-left: 2px;
-	color: var(--light-green);
+.GenreContainer {
+	margin-top: 5px;
+	display: flex;
+	align-items: center;
+}
+
+.GenreText {
+	color: var(--neon-green);
+}
+
+.genres {
+	display: flex;
+	align-items: center;
+	overflow-x: auto;
 }
 
 .MangaGenre {
 	background-color: #5f5f5f5d;
-	padding: 2px;
 	border-radius: 5px;
+	padding: 2px 5px;
 	cursor: pointer;
+	margin: 2px;
+}
+
+.MangaRatings {
+	display: flex;
+	margin: 5px 0px 10px 0px;
+	/* justify-content: center; */
+}
+
+.MangaRatings span {
+	margin-right: 2px;
+	margin-left: 2px;
+	color: var(--light-green);
 }
 
 .Character {
@@ -70,7 +96,6 @@
 	border-radius: 5px;
 }
 
-
 .CharacterEntry {
 	display: flex;
 	flex-direction: column;
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 70c4f84..c8eb389 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -4,6 +4,7 @@ import Buttons from "./buttons";
 import { redirect } from "next/navigation";
 import { FaStar } from "react-icons/fa";
 import CurrentReading from "./[read]/currentReading";
+import PreFetchChaterLinks from "../../cacher";
 
 export const runtime = "edge";
 
@@ -15,6 +16,8 @@ export default async function MangaInfo({ params }) {
 		redirect("/404");
 	}
 
+	PreFetchChaterLinks(data.chapters);
+
 	return (
 		<div className={styles.MangaInfoContainer}>
 			{data && (
@@ -49,34 +52,41 @@ export default async function MangaInfo({ params }) {
 					</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 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 className={styles.Description}>
+							<h2>Description</h2>
+							<p>{data.description.split("<br")[0]}</p>
+						</div>
+
+						<div className={styles.MangaReleaseYear}>
+							<span style={{ color: "#A3FFD6" }}>
+								Started on: {data.startDate["day"]}-
+								{data.startDate["month"]}-
+								{data.startDate["year"]}
+							</span>
+							<span style={{ color: "white", margin: 10 }}>
+								|
+							</span>
+							<span style={{ color: "var(--pastel-red)" }}>
+								Ended on: {data.endDate["day"]}-
+								{data.endDate["month"]}-{data.endDate["year"]}
+							</span>
+						</div>
+
+						<div className={styles.GenreContainer}>
+							<span className={styles.GenreText}>Genres: </span>
+							<div className={styles.genres}>
+								{data.genres &&
+									data.genres.map((item, index) => (
+										<span
+											key={index}
+											className={styles.MangaGenre}
+										>
+											{item}
+										</span>
+									))}
+							</div>
+						</div>
+
 						<div className={styles.MangaRatings}>
 							<span>Ratings: {data.rating / 10}</span>
 							<span>
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index 27c3a37..97a4dba 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -1,6 +1,6 @@
 .Main {
 	max-width: 90%;
-	margin: 0px auto;
+	margin: 60px auto;
 }
 
 .MangaContainer {
@@ -18,7 +18,7 @@
 .MangaEntries {
 	display: flex;
 	flex-direction: row;
-	margin: 10px;
+	margin: 0px 10px 10px 10px;
 	padding: 10px;
 	border-style: dotted;
 	border-color: #363636 #474747;
diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js
new file mode 100644
index 0000000..ef8ef2e
--- /dev/null
+++ b/src/app/manga/cacher.js
@@ -0,0 +1,19 @@
+// This function pre-fetches all the chapter pages links for a manga in the background
+"use server";
+
+export default async function PreFetchChaterLinks(data) {
+	try {
+		const fetchPromises = data.map(async (element) => {
+			const link = `https://consumet-api-di2e.onrender.com/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`;
+			await fetch(link, { cache: "force-cache" });
+		});
+
+		await Promise.all(fetchPromises);
+		console.log("Chapter links pre-fetched successfully!");
+	} catch (error) {
+		console.error(
+			"Error occurred while pre-fetching chapter links:",
+			error
+		);
+	}
+}
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 231b93d..0f9c123 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,41 +1,21 @@
 import Image from "next/image";
 import styles from "./page.module.css";
-import Link from "next/link";
-import Footer from "./components/footer/page";
 
 export default function Home() {
 	return (
 		<main className={styles.main}>
-			<Link href="https://github.com/real-zephex/Dramalama">
+			<div className={styles.welcomeContainer}>
 				<Image
-					src={"/dramalama.svg"}
-					width={480}
-					height={240}
-					className={styles.HomeSVG}
-				/>
-			</Link>
-			<div className={styles.redirects}>
-				<Link href="/kdrama">
-					<p>kdrama </p>
-				</Link>
-				<p style={{ color: "white" }}>|</p>
-				<Link href="/">
-					<p>
-						anime
-						<span style={{ color: "var(--pastel-red)" }}>
-							(depr)
-						</span>
-					</p>
-				</Link>
-				<p style={{ color: "white" }}>|</p>
-				<Link href="/">
-					<p>
-						manga
-						<span style={{ color: "var(--pastel-red)" }}>
-							(down)
-						</span>
-					</p>
-				</Link>
+					src="/logo.png"
+					width={300}
+					height={300}
+					alt="Logo"
+					priority
+				></Image>
+				<p>
+					Hey there, welcome to Dramalama. We are excited to have you
+					on board.
+				</p>
 			</div>
 		</main>
 	);
diff --git a/src/app/page.module.css b/src/app/page.module.css
index dcbc36b..f73f9fe 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,51 +1,15 @@
-.main {
-	max-width: 90%;
-	margin: 0px auto;
+.welcomeContainer {
 	display: flex;
-	height: 100dvh;
 	flex-direction: column;
-	align-items: center;
 	justify-content: center;
-}
-
-.redirects {
-	display: flex;
 	align-items: center;
-	margin-top: -10px;
-}
-
-.HomeSVG {
-	transition: transform 0.2s linear;
-}
-
-.HomeSVG:hover {
-	transition: transform 0.2s linear;
-	transform: translate(2px, -8px);
+	height: 100dvh;
+	margin: 0px auto;
+	text-align: center;
 }
 
-.redirects a {
+.welcomeContainer p {
+	font-family: "Poppins";
+	font-size: 20px;
 	color: white;
-	text-decoration: none;
-	margin-right: 10px;
-	margin-left: 10px;
-	color: var(--light-green);
-}
-
-@media screen and (max-width: 768px) {
-	.HomeSVG {
-		width: 400px;
-		margin-bottom: -20px;
-	}
-}
-
-@media screen and (max-width: 425px) {
-	.HomeSVG {
-		width: 350px;
-	}
-}
-
-@media screen and (max-width: 375px) {
-	.HomeSVG {
-		width: 300px;
-	}
 }
\ No newline at end of file