🎨 style(anime): UI improvements to the anime page

12 files changed, 162 insertions, 106 deletions

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index 7715dc6..d338417 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -21,18 +21,14 @@ const AnimeInfoHomepage = async ({ params }) => {
 						<div className={styles.AnimeHeroSection}>

 							<Image

 								src={data.image}

-								width={200}

-								height={300}

+								width={180}

+								height={280}

 								alt="Anime Poster"

 								priority

 							/>

 							<div>

-								<p className={styles.animeTitle}>

-									<strong

-										style={{ color: "var(--neon-green)" }}

-									>

-										{data.title || "Not Found"}

-									</strong>

+								<p className={styles.animeTitle} style={{color: "white"}}>

+									{data.title || "Not Found"}

 								</p>

 								<p className={styles.animeDescription}>

 									<strong>Description: </strong>

@@ -45,7 +41,10 @@ const AnimeInfoHomepage = async ({ params }) => {
 									</strong>

 									{data.genres &&

 										data.genres.map((item, index) => (

-											<span key={index}>

+											<span

+												key={index}

+												style={{ color: "#a3a3a3" }}

+											>

 												{item}

 												{index !==

 													data.genres.length - 1 &&

diff --git a/src/app/anime/components/popularAnimes.jsx b/src/app/anime/components/popularAnimes.jsx
index 5bf8904..e62f70f 100644
--- a/src/app/anime/components/popularAnimes.jsx
+++ b/src/app/anime/components/popularAnimes.jsx
@@ -1,12 +1,12 @@
 import Link from "next/link";
 import Image from "next/image";
-import { Atkinson_Hyperlegible } from "next/font/google";
+import { Lexend_Deca } from "next/font/google";
 
 import styles from "../styles/pop_recent_top.module.css";
-import { popular, anime_info } from "../data-fetch/request";
+import { popular } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 
-const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" });
+const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" });
 
 const PopularAnimes = async () => {
 	const data = await popular();
@@ -28,17 +28,19 @@ const PopularAnimes = async () => {
 									color: "white",
 									textDecoration: "none",
 								}}
-								className={atkinson.className}
+								className={lexend.className}
 								title={item.title}
 							>
 								<section className={styles.AnimeEntry}>
 									<Image
 										src={item.image}
-										width={167}
-										height={267}
+										width={180}
+										height={300}
 										alt="Anime Poster Image"
 									/>
-									<p>{item.title}</p>
+									<p className={styles.AnimeTitle}>
+										{item.title}
+									</p>
 								</section>
 							</Link>
 						))}
diff --git a/src/app/anime/components/recentEpisodes.jsx b/src/app/anime/components/recentEpisodes.jsx
index 43ad1de..3cc8d4d 100644
--- a/src/app/anime/components/recentEpisodes.jsx
+++ b/src/app/anime/components/recentEpisodes.jsx
@@ -1,12 +1,12 @@
 import Link from "next/link";
 import Image from "next/image";
-import { Atkinson_Hyperlegible } from "next/font/google";
+import { Lexend_Deca } from "next/font/google";
 
 import styles from "../styles/pop_recent_top.module.css";
 import { recent } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 
-const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" });
+const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" });
 
 const RecentAnimes = async () => {
 	const data = await recent();
@@ -28,19 +28,18 @@ const RecentAnimes = async () => {
 									color: "white",
 									textDecoration: "none",
 								}}
-								className={atkinson.className}
+								className={lexend.className}
 								title={item.title}
 							>
 								<section className={styles.AnimeEntry}>
 									<Image
 										src={item.image}
-										width={167}
-										height={267}
+										width={180}
+										height={300}
 										alt="Anime Poster Image"
 									/>
-									<p>{item.title}</p>
-									<p className={styles.EpisodeText}>
-										Episode: {item.episodeNumber}
+									<p className={styles.AnimeTitle}>
+										Ep:{item.episodeNumber} {" "}{item.title}
 									</p>
 								</section>
 							</Link>
diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx
index 66c491a..0a780f8 100644
--- a/src/app/anime/components/search.jsx
+++ b/src/app/anime/components/search.jsx
@@ -23,7 +23,7 @@ const SearcBar = () => {
 		<main>
 			<section className={styles.SearchBarContainer}>
 				<div className={styles.SearchInputContainer}>
-					<FaSearch color="white" />
+					<FaSearch color="white" size={22} />
 					<input
 						placeholder="Enter anime title"
 						name="Anime Title"
@@ -44,12 +44,12 @@ const SearcBar = () => {
 							}
 						}}
 					></input>
+					<Link shallow href={"/anime/continueWatching"}>
+						<button className={styles.animeHistoryButton}>
+							History
+						</button>
+					</Link>
 				</div>
-				<Link shallow href={"/anime/continueWatching"}>
-					<button className={styles.animeHistoryButton}>
-						History
-					</button>
-				</Link>
 			</section>
 			{loading && (
 				<p className={styles.SearchLoading}>
diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx
index d4c8146..051124d 100644
--- a/src/app/anime/components/search_results.jsx
+++ b/src/app/anime/components/search_results.jsx
@@ -1,4 +1,4 @@
-import { Atkinson_Hyperlegible } from "next/font/google";
+import { Lexend_Deca } from "next/font/google";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -6,7 +6,7 @@ import styles from "../styles/search.module.css";
 import { search_results } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 
-const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" });
+const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" });
 
 const SearchResults = async (title) => {
 	const data = await search_results(title);
@@ -21,17 +21,17 @@ const SearchResults = async (title) => {
 						shallow
 						href={`/anime/${item.id}`}
 						key={index}
-						className={atkinson.className}
+						className={lexend.className}
 						style={{ color: "white", textDecoration: "none" }}
 					>
 						<div className={styles.AnimeEntry}>
-							<p>{item.title}</p>
 							<Image
 								src={item.image}
-								width={140}
-								height={200}
+								width={180}
+								height={300}
 								alt="Anime Poster"
 							/>
+							<p>{item.title}</p>
 						</div>
 					</Link>
 				))}
diff --git a/src/app/anime/components/topAiring.jsx b/src/app/anime/components/topAiring.jsx
index 28d3f6d..367da16 100644
--- a/src/app/anime/components/topAiring.jsx
+++ b/src/app/anime/components/topAiring.jsx
@@ -1,12 +1,12 @@
 import Link from "next/link";
 import Image from "next/image";
-import { Atkinson_Hyperlegible } from "next/font/google";
+import { Lexend_Deca } from "next/font/google";
 
 import styles from "../styles/pop_recent_top.module.css";
 import { top_airing } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 
-const atkinson = Atkinson_Hyperlegible({ subsets: ["latin"], weight: "400" });
+const lexend = Lexend_Deca({ subsets: ["latin"], weight: "400" });
 
 const TopAiringAnimes = async () => {
 	const data = await top_airing();
@@ -28,19 +28,18 @@ const TopAiringAnimes = async () => {
 									color: "white",
 									textDecoration: "none",
 								}}
-								className={atkinson.className}
+								className={lexend.className}
 								title={item.title}
 							>
 								<section className={styles.AnimeEntry}>
 									<Image
 										src={item.image}
-										width={167}
-										height={267}
+										width={180}
+										height={300}
 										alt="Anime Poster Image"
 									/>
-									<p>{item.title}</p>
-									<p className={styles.EpisodeText}>
-										Episode: {item.episodeNumber}
+									<p className={styles.AnimeTitle}>
+										{item.title}
 									</p>
 								</section>
 							</Link>
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index 209105b..7143740 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -8,9 +8,9 @@ const AnimeHomepage = async () => {
 		<main className={styles.Main}>

 			<SearcBar />

 			<TopAiringAnimes />

-			<hr style={{ marginTop: 15, borderColor: "gray" }} />

+			<br />

 			<RecentAnimes />

-			<hr style={{ marginTop: 15, borderColor: "gray" }} />

+			<br />

 			<PopularAnimes />

 		</main>

 	);

diff --git a/src/app/anime/styles/info.module.css b/src/app/anime/styles/info.module.css
index 4216b37..afdc08f 100644
--- a/src/app/anime/styles/info.module.css
+++ b/src/app/anime/styles/info.module.css
@@ -10,38 +10,32 @@
 }
 
 .AnimeHeroSection strong {
-	color: var(--neon-yellow);
+	color: #38bdf8;
 }
 
 .AnimeHeroSection img {
-	width: auto;
-	height: auto;
+	/* width: auto;
+	height: auto; */
 	padding: 0.5rem 0.7rem 0.5rem 0.7rem;
-	border-radius: 1rem;
 }
 
 .animeDescription {
 	max-height: 100px;
 	overflow: auto;
-	color: var(--light-sky);
 }
 
 .animeDescription::-webkit-scrollbar {
-	width: 3px;
-}
-
-.animeDescription::-webkit-scrollbar-thumb {
-	background-color: var(--nord-yellow);
-	border-radius: 1rem;
+	width: 0px;
 }
 
 .AnimeHeroSection p {
 	margin: 0;
+	color: #a3a3a3;
 }
 
 .animeTitle {
-	font-size: 28px;
-	color: var(--neon-green);
+	font-size: 26px;
+	text-transform: uppercase;
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/src/app/anime/styles/pop_recent_top.module.css b/src/app/anime/styles/pop_recent_top.module.css
index 0feda13..212d07a 100644
--- a/src/app/anime/styles/pop_recent_top.module.css
+++ b/src/app/anime/styles/pop_recent_top.module.css
@@ -1,51 +1,94 @@
 .AnimeHeaderText {
 	color: white;
 	margin: 0.4rem 0 0 0;
+	text-transform: uppercase;
+	font-size: 30px;
 }
 
 .AnimeContainer {
 	margin: 0.2rem 0 0 0;
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-	grid-gap: 0.7rem;
+	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+	grid-gap: 0.5rem;
 }
 
-.AnimeEntry {
+/* .AnimeEntry {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
 	text-align: center;
 	padding: 0.8rem;
+	border-radius: 0.4rem;
+	background-color: #1a1a1a;
+	transition: opacity 200ms ease;
+} */
+
+.AnimeEntry {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
 	border-radius: 0.5rem;
-	background-color: #1f1f1f;
+	transition: opacity 200ms ease;
+
+}
+
+.AnimeContainer:hover .AnimeEntry {
+	opacity: 0.5;
+}
+
+.AnimeContainer:hover .AnimeEntry:hover {
+	opacity: 1;
 }
 
 .AnimeEntry img {
-	border-radius: 0.5rem;
+	display: block;
+	transition: transform 200ms ease;
 }
 
-.AnimeEntry p {
-	margin: 0.2rem 0 -0.4rem 0;
-	max-width: 160px;
+.AnimeEntry img:hover {
+	transform: translateY(-5px) scale(1.04);
+}
+
+/* .AnimeEntry p {
+	margin: 0.5rem 0 -0.4rem 0;
+	max-width: 170px;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	text-transform: uppercase;
+} */
+
+.AnimeTitle {
+	position: absolute;
+	bottom: 0;
+	/* Adjust the value as needed */
+	left: 50%;
+	transform: translateX(-50%);
+	margin: 0;
+	color: white;
+	padding: 5px;
+	text-align: center;
+	background-color: #121212ab;
+	backdrop-filter: blur(10px);
+	text-transform: uppercase;
+	width: 100%;
+	max-width: 170px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.EpisodeText {
+/* .EpisodeText {
 	color: var(--neon-yellow);
 	font-size: small;
 	padding-top: 0.2rem;
-}
+} */
+
 .AnimeContainer::-webkit-scrollbar {
-	height: 0.3rem;
+	height: 0rem;
 }
 
-.AnimeContainer::-webkit-scrollbar-thumb {
-	background-color: var(--neon-yellow);
-	border-radius: 1rem;
-}
 
 @media screen and (max-width: 768px) {
 	.AnimeContainer {
diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css
index 25fa4d4..abed86c 100644
--- a/src/app/anime/styles/search.module.css
+++ b/src/app/anime/styles/search.module.css
@@ -8,8 +8,8 @@
 .SearchInputContainer {
 	display: flex;
 	align-items: center;
-	background-color: #121212;
-	padding: 0.5rem;
+	background-color: #1f1f1f;
+	padding: 0.4rem;
 	border-radius: 0.5rem;
 	width: 40%;
 }
@@ -21,7 +21,7 @@
 	background-color: #121212;
 	color: white;
 	margin: 0 0.1rem 0 0.2rem;
-	padding: 0.5rem;
+	padding: 0.6rem;
 	cursor: pointer;
 	border-radius: 0.5rem;
 }
@@ -32,7 +32,7 @@
 	outline: none;
 	color: white;
 	margin-left: 0.5rem;
-	font-size: 18px;
+	font-size: 20px;
 	font-family: "Atkinson Hyperlegible", serif;
 	width: 100%;
 }
@@ -45,39 +45,65 @@
 /* Search Results */
 
 .SearchResultsContainer {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-	grid-gap: 0.7rem;
+	display: flex;
+	align-items: center;
+	overflow-x: auto;
+	padding-bottom: 0.5rem;
 }
 
 .AnimeEntry {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background-color: #252525be;
-	padding: 0.5rem;
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
 	border-radius: 0.5rem;
+	transition: opacity 200ms ease;
+	margin: 0.4rem;
+}
+
+.SearchResultsContainer:hover .AnimeEntry {
+	opacity: 0.5;
+}
+
+.SearchResultsContainer:hover .AnimeEntry:hover {
+	opacity: 1;
 }
 
 .AnimeEntry p {
-	font-size: 18px;
+	position: absolute;
+	bottom: 0;
+	/* Adjust the value as needed */
+	left: 50%;
+	transform: translateX(-50%);
+	margin: 0;
+	color: white;
+	padding: 5px;
+	text-align: center;
+	background-color: #121212ab;
+	backdrop-filter: blur(10px);
+	text-transform: uppercase;
+	width: 100%;
+	max-width: 170px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .AnimeEntry img {
-	border-radius: 0.5rem;
-	margin-left: 0.2rem;
+	display: block;
+	transition: transform 200ms ease;
 }
 
-.SearchResultsContainer::-webkit-scrollbar {
-	height: 0.2rem;
+.AnimeEntry img:hover {
+	transform: translateY(-5px) scale(1.04);
 }
 
-.SearchResultsContainer::-webkit-scrollbar-track {
-	background-color: var(--softer-purple);
+
+.SearchResultsContainer::-webkit-scrollbar {
+	height: 0.5rem;
 }
 
 .SearchResultsContainer::-webkit-scrollbar-thumb {
-	background-color: var(--light-green);
+	background: rgb(83, 83, 83);
 	border-radius: 1rem;
 }
 
@@ -86,13 +112,5 @@
 		width: 100%;
 	}
 
-	.SearchResultsContainer {
-		display: flex;
-		align-items: center;
-		overflow: auto;
-	}
 
-	.AnimeEntry p {
-		width: 50vw;
-	}
 }
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 233d7d1..bcf2a8b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -26,7 +26,7 @@
 body {

 	margin: 0;

 	padding: 0;

-	background-color: #1a1a1a;

+	background-color: #121212;

 }

 

 body::-webkit-scrollbar {

diff --git a/src/app/page.module.css b/src/app/page.module.css
index d831e8d..e0b9a60 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -12,7 +12,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	background-color: #121212;
+	background-color: #1212129d;
+	backdrop-filter: blur(10px);
 	z-index: 999;
 }
 
@@ -76,7 +77,8 @@
 	bottom: 0;
 	width: 100%;
 	position: fixed;
-	background-color: #121212;
+	background-color: #1212129a;
+	backdrop-filter: blur(10px);
 	color: white;
 	font-family: "Poppins", serif;
 	z-index: 999;
@@ -86,7 +88,7 @@
 	text-align: center;
 	font-size: 14px;
 	margin: 0;
-	padding: 0.6rem;
+	padding: 0.2rem;
 	font-family: "Poppins", serif;
 }