3 files changed, 22 insertions, 7 deletions
diff --git a/components/home/content.js b/components/home/content.js
index 9b2b1a9..9d41fe9 100644
--- a/components/home/content.js
+++ b/components/home/content.js
@@ -151,7 +151,7 @@ export default function Content({ ids, section, data, og, userName }) {
         </div>
         <div
           id={ids}
-          className="scroll flex h-full w-full items-center select-none overflow-x-scroll whitespace-nowrap overflow-y-hidden scrollbar-hide lg:gap-8 gap-3 lg:p-10 py-8 px-5 z-30 scroll-smooth"
+          className="scroll flex h-full w-full select-none overflow-x-scroll overflow-y-hidden scrollbar-hide lg:gap-8 gap-4 lg:p-10 py-8 px-5 z-30 scroll-smooth"
           onScroll={handleScroll}
           onMouseDown={handleMouseDown}
           onMouseUp={handleMouseUp}
@@ -165,14 +165,14 @@ export default function Content({ ids, section, data, og, userName }) {
             return (
               <div
                 key={anime.id}
-                className="flex shrink-0 cursor-pointer items-center"
+                className="flex flex-col gap-3 shrink-0 cursor-pointer"
               >
                 <Link
                   href={`/${lang}/anime/${anime.id}`}
                   className="hover:scale-105 hover:shadow-lg group relative duration-300 ease-out"
                 >
                   {ids === "onGoing" && (
-                    <div className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] bg-gradient-to-b from-transparent to-black absolute z-40 rounded-md whitespace-normal font-karla group">
+                    <div className="h-[190px] lg:h-[265px] w-[135px] lg:w-[185px] bg-gradient-to-b from-transparent to-black absolute z-40 rounded-md whitespace-normal font-karla group">
                       <div className="flex flex-col items-center h-full justify-end text-center pb-5">
                         <h1 className="line-clamp-1 w-[70%] text-[10px]">
                           {anime.title.romaji || anime.title.english}
@@ -217,7 +217,7 @@ export default function Content({ ids, section, data, og, userName }) {
                     alt={
                       anime.title.romaji || anime.title.english || "coverImage"
                     }
-                    width={209}
+                    width={500}
                     height={300}
                     placeholder="blur"
                     blurDataURL={
@@ -229,6 +229,21 @@ export default function Content({ ids, section, data, og, userName }) {
                     className="z-20 h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] object-cover rounded-md brightness-90"
                   />
                 </Link>
+                {ids !== "onGoing" && (
+                  <Link
+                    href={`/en/anime/${anime.id}`}
+                    className="w-[135px] lg:w-[185px] line-clamp-2"
+                  >
+                    <h1 className="font-karla font-semibold xl:text-base text-[15px]">
+                      {anime.status === "RELEASING" ? (
+                        <span className="dots bg-green-500" />
+                      ) : anime.status === "NOT_YET_RELEASED" ? (
+                        <span className="dots bg-red-500" />
+                      ) : null}
+                      {anime.title.romaji}
+                    </h1>
+                  </Link>
+                )}
               </div>
             );
           })}
diff --git a/components/home/genres.js b/components/home/genres.js
index ac67260..3eefecd 100644
--- a/components/home/genres.js
+++ b/components/home/genres.js
@@ -57,7 +57,7 @@ export default function Genres() {
       <div className="flex xl:justify-center items-center relative">
         <div className="bg-gradient-to-r from-primary to-transparent z-40 absolute w-7 h-[200px] left-0" />
         <div className="flex lg:gap-8 gap-3 lg:p-10 py-8 px-5 z-30 overflow-y-hidden overflow-x-scroll snap-x snap-proximity scrollbar-none relative">
-          <div className="flex lg:gap-10 gap-3">
+          <div className="flex lg:gap-10 gap-4">
             {g.map((a, index) => (
               <Link
                 href={`${lang}/search/anime/?genres=${a.name}`}
diff --git a/components/home/schedule.js b/components/home/schedule.js
index 4a85143..187fa17 100644
--- a/components/home/schedule.js
+++ b/components/home/schedule.js
@@ -45,11 +45,11 @@ export default function Schedule({ data, scheduleData, time }) {
       <div className="rounded mb-5 shadow-md shadow-black">
         <div className="overflow-hidden w-full h-[96px] lg:h-[10rem] rounded relative">
           <div className="absolute flex flex-col justify-center pl-5 lg:pl-16 rounded z-20 bg-gradient-to-r from-30% from-[#0c0c0c] to-transparent w-full h-full">
-            <h1 className="text-xs xl:text-lg">Coming Up Next!</h1>
+            <h1 className="text-xs lg:text-lg">Coming Up Next!</h1>
             <div className="w-1/2 lg:w-2/5 hidden lg:block font-medium font-karla leading-[2.9rem] text-white line-clamp-1">
               <Link
                 href={`/en/anime/${data.id}`}
-                className="hover:underline underline-offset-4 decoration-2 lg:text-lg xl:text-2xl 2xl:text-3xl"
+                className="hover:underline underline-offset-4 decoration-2 lg:text-[1.7vw] "
               >
                 {data.title.romaji || data.title.english || data.title.native}
               </Link>