fixes and improvements: dramalaam is no longer hosted on koyeb cuz of

high latency issues.

16 files changed, 125 insertions, 418 deletions

diff --git a/src/app/anime/[id]/loading.css b/src/app/anime/[id]/loading.css
deleted file mode 100644
index aa3a519..0000000
--- a/src/app/anime/[id]/loading.css
+++ /dev/null
@@ -1,346 +0,0 @@
-.loadingContainer {
-	color: white;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 80dvh;
-}
-
-
-.text-flicker-in-glow {
-	-webkit-animation: text-flicker-in-glow 4s linear both;
-	animation: text-flicker-in-glow 4s linear both;
-	font-size: 36px;
-	font-family: "Kanit";
-}
-
-/* ----------------------------------------------
- * Generated by Animista on 2024-3-21 9:58:16
- * Licensed under FreeBSD License.
- * See http://animista.net/license for more info. 
- * w: http://animista.net, t: @cssanimista
- * ---------------------------------------------- */
-
-/**
- * ----------------------------------------
- * animation text-flicker-in-glow
- * ----------------------------------------
- */
-
-@-webkit-keyframes text-flicker-in-glow {
-	0% {
-		opacity: 0;
-	}
-
-	10% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	10.1% {
-		opacity: 1;
-		text-shadow: none;
-	}
-
-	10.2% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
-	}
-
-	20.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.5% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	50% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	100% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-}
-
-@keyframes text-flicker-in-glow {
-	0% {
-		opacity: 0;
-	}
-
-	10% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	10.1% {
-		opacity: 1;
-		text-shadow: none;
-	}
-
-	10.2% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	20.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
-	}
-
-	20.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	30.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.5% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	30.6% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	45.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	50% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
-	}
-
-	55.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	57.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
-	}
-
-	60.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	65.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	75.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	77.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	85.1% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86% {
-		opacity: 0;
-		text-shadow: none;
-	}
-
-	86.1% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-
-	100% {
-		opacity: 1;
-		text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
-	}
-}
-
-@media (prefers-color-scheme: light) {
-	.loadingContainer {
-		color: black;
-	}
-}
\ No newline at end of file
diff --git a/src/app/anime/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx
index dfa397c..b5670da 100644
--- a/src/app/anime/[id]/loading.jsx
+++ b/src/app/anime/[id]/loading.jsx
@@ -1,9 +1,11 @@
-import "./loading.css";
+import styles from "./loading.module.css";
 
 export default function Loading() {
 	return (
-		<div className="loadingContainer">
-			<p className="text-flicker-in-glow">Loading</p>
+		<div className={styles.loadingContainer}>
+			<p className={styles.loadingText}>
+				Please wait while we load all the data for you.
+			</p>
 		</div>
 	);
 }
diff --git a/src/app/anime/[id]/loading.module.css b/src/app/anime/[id]/loading.module.css
new file mode 100644
index 0000000..c95784d
--- /dev/null
+++ b/src/app/anime/[id]/loading.module.css
@@ -0,0 +1,12 @@
+.loadingContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 90dvh;
+}
+
+.loadingText {
+	color: white;
+	font-family: "Lato";
+	font-size: 24px;
+}
\ No newline at end of file
diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index 779f0d4..ddfbc3f 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -1,13 +1,20 @@
 import "./recent.css";
 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 test();
 
 	return (
 		<div className="trendingContainer">
-			<p className="trendingText">Recent Releases</p>
+			<div className={styles.RecentText}>
+				<p>Recent Releases</p>
+				<span>
+					<MdRecentActors size={26} color="aqua" />
+				</span>
+			</div>
 
 			<div className="trending">
 				{data &&
diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
new file mode 100644
index 0000000..5756ccb
--- /dev/null
+++ b/src/app/anime/recent/recent.module.css
@@ -0,0 +1,15 @@
+.RecentText {
+	color: #FFB996;
+	display: flex;
+	align-items: center;
+}
+
+.RecentText p {
+	font-size: 26px;
+	margin: 5px;
+	font-family: "Quicksand";
+}
+
+.RecentText span {
+	margin-top: 6px;
+}
\ 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 5536870..3d26d88 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -1,13 +1,19 @@
-import "./trending.css";
+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();
 
 	return (
 		<div className="trendingContainer">
-			<p className="trendingText">Trending</p>
+			<div className={styles.TrendingText}>
+				<p>Trending</p>
+				<span>
+					<HiTrendingUp size={26} color="aqua" />
+				</span>
+			</div>
 
 			<div className="trending">
 				{data &&
diff --git a/src/app/anime/top-airing/trending.css b/src/app/anime/top-airing/trending.css
deleted file mode 100644
index e69de29..0000000
--- a/src/app/anime/top-airing/trending.css
+++ /dev/null
diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
new file mode 100644
index 0000000..d03bab3
--- /dev/null
+++ b/src/app/anime/top-airing/trending.module.css
@@ -0,0 +1,15 @@
+.TrendingText {
+	color: #FFB996;
+	display: flex;
+	align-items: center;
+}
+
+.TrendingText p {
+	font-size: 26px;
+	margin: 5px;
+	font-family: "Quicksand";
+}
+
+.TrendingText span {
+	margin-top: 6px;
+}
\ No newline at end of file
diff --git a/src/app/components/footer/page.jsx b/src/app/components/footer/page.jsx
index f3c9fc7..e3af4f9 100644
--- a/src/app/components/footer/page.jsx
+++ b/src/app/components/footer/page.jsx
@@ -17,26 +17,23 @@ export default async function Footer() {
 					Github
 				</a>
 				<a
-					style={{ color: "#A3BE8C" }}
-					href="https://dramalama-zephex.koyeb.app"
-					target="_new"
-				>
-					Koyeb
-				</a>
-				<a
 					style={{ color: "#EBCB8B" }}
 					href="https://dramalama.vercel.app"
-					target="_new"
 				>
 					Vercel
 				</a>
 				<a
 					style={{ color: "#BF616A" }}
 					href="https://dramalama.netlify.app"
-					target="_new"
 				>
 					Netlify
 				</a>
+				<a
+					style={{ color: "	#A3BE8C" }}
+					href="https://dramalama-1phg.onrender.com"
+				>
+					Render
+				</a>
 			</p>
 		</div>
 	);
diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx
index 22798b4..f41352a 100644
--- a/src/app/components/header/header.jsx
+++ b/src/app/components/header/header.jsx
@@ -1,9 +1,11 @@
 import Link from "next/link";
 
+import styles from "./header.module.css";
+
 export default function Header() {
 	return (
-		<div className="headMain">
-			<div className="headNav">
+		<div className={styles.headMain}>
+			<div className={styles.headNav}>
 				<Link
 					href="/"
 					style={{ color: "black", textDecoration: "none" }}
@@ -12,7 +14,7 @@ export default function Header() {
 						Dramalama
 					</p>
 				</Link>
-				<div className="rightNav">
+				<div className={styles.rightNav}>
 					<Link href="/anime">
 						<p>Anime</p>
 					</Link>
diff --git a/src/app/components/header/header.module.css b/src/app/components/header/header.module.css
new file mode 100644
index 0000000..6a67bf6
--- /dev/null
+++ b/src/app/components/header/header.module.css
@@ -0,0 +1,26 @@
+.headNav {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	max-width: 95%;
+	margin: -10px auto;
+	font-family: "Quicksand";
+}
+
+.rightNav {
+	display: flex;
+	cursor: pointer;
+	overflow-x: auto;
+}
+
+.rightNav a {
+	text-decoration: none;
+	color: white;
+	font-size: 20px;
+}
+
+.rightNav p {
+	margin-right: 10px;
+	margin-left: 10px;
+}
\ No newline at end of file
diff --git a/src/app/error.jsx b/src/app/error.jsx
index fabcb0c..7060187 100644
--- a/src/app/error.jsx
+++ b/src/app/error.jsx
@@ -1,7 +1,7 @@
 "use client"; // Error components must be Client Components
 
 import { useEffect } from "react";
-import "./globals.css";
+import styles from "./globals.module.css";
 
 export default function Error({ error, reset }) {
 	useEffect(() => {
@@ -9,7 +9,7 @@ export default function Error({ error, reset }) {
 	}, [error]);
 
 	return (
-		<div className="ErrorContainer">
+		<div className={styles.ErrorContainer}>
 			<p>Something went wrong!</p>
 			<button
 				onClick={
diff --git a/src/app/globals.css b/src/app/globals.css
index c0273da..15f3d07 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,7 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Kanit:wght@400;700&family=Quicksand:wght@400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans&display=swap');
-
-
 :root {
 	--neon-green: #45FFCA;
 	--neon-yellow: #FEFFAC;
@@ -21,52 +17,6 @@ body::-webkit-scrollbar {
 	width: 0px;
 }
 
-.headNav {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	max-width: 95%;
-	margin: -10px auto;
-	font-family: "Quicksand";
-}
-
-.rightNav {
-	display: flex;
-	cursor: pointer;
-	overflow-x: auto;
-}
-
-.rightNav a {
-	text-decoration: none;
-	color: black;
-	font-size: 20px;
-}
-
-.rightNav p {
-	margin-right: 10px;
-	margin-left: 10px;
-}
-
-.ErrorContainer {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-	height: 90dvh;
-	color: white;
-	font-family: "Kanit";
-	font-size: 20px;
-}
-
-.ErrorContainer button {
-	border-radius: 5px;
-	padding: 3px;
-	font-family: "Lato";
-	border: 0;
-	outline: 0;
-}
-
 @media (prefers-color-scheme: dark) {
 	body {
 		background-color: black;
diff --git a/src/app/globals.module.css b/src/app/globals.module.css
new file mode 100644
index 0000000..e57a44b
--- /dev/null
+++ b/src/app/globals.module.css
@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital@0;1&family=Quicksand&display=swap');
+
+.ErrorContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	height: 90dvh;
+	color: white;
+	font-family: "Kanit";
+	font-size: 20px;
+}
+
+.ErrorContainer button {
+	border-radius: 5px;
+	padding: 3px;
+	font-family: "Lato";
+	border: 0;
+	outline: 0;
+}
\ No newline at end of file
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 26d573d..1b8875d 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,4 +1,5 @@
 import { Inter } from "next/font/google";
+import styles from "./globals.module.css";
 import "./globals.css";
 import Header from "./components/header/header";
 import { SpeedInsights } from "@vercel/speed-insights/next";
diff --git a/src/app/page.jsx b/src/app/page.jsx
index d77c55e..109264d 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -14,8 +14,8 @@ export default function Home() {
 					priority
 				></Image>
 				<p>
-					Welcome to dramalama. An online service where you can watch
-					kdramas and anime for free.
+					Hey there, welcome to Dramalama. We are excited to have you
+					on board.
 				</p>
 			</div>
 			<Footer />