From 4b97ebedc8c192a3b05cd08d35b3bf155fa5c90d Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Fri, 1 Aug 2025 23:06:04 +0530
Subject: [PATCH] CARD STYLE FIX

---
 src/components/categorycard/CategoryCard.jsx | 40 ++++++++++----------
 src/components/continue/ContinueWatching.jsx |  8 ++--
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index 896a9f0..d8005a0 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -131,39 +131,39 @@ const CategoryCard = React.memo(
                     </div>
                     {(item.tvInfo?.rating === "18+" ||
                       item?.adultContent === true) && (
-                      <div className="text-white px-3 py-1 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[14px] font-bold">
+                      <div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
                         18+
                       </div>
                     )}
-                    <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/90 to-transparent">
+                    <div className="absolute bottom-0 left-0 right-0 p-3 pb-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
                       <div className="flex items-center justify-start w-full space-x-1.5 z-[100] flex-wrap gap-y-1.5">
                         {item.tvInfo?.sub && (
-                          <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5">
+                          <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
                             <FontAwesomeIcon
                               icon={faClosedCaptioning}
-                              className="text-[10px]"
+                              className="text-[11px]"
                             />
-                            <p className="text-[10px] font-medium">
+                            <p className="text-[11px] font-medium">
                               {item.tvInfo.sub}
                             </p>
                           </div>
                         )}
                         {item.tvInfo?.dub && (
-                          <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5">
+                          <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
                             <FontAwesomeIcon
                               icon={faMicrophone}
-                              className="text-[10px]"
+                              className="text-[11px]"
                             />
-                            <p className="text-[10px] font-medium">
+                            <p className="text-[11px] font-medium">
                               {item.tvInfo.dub}
                             </p>
                           </div>
                         )}
-                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium">
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
                           {item.tvInfo.showType.split(" ").shift()}
                         </div>
                         <div className="w-0.5 h-0.5 rounded-full bg-white/60"></div>
-                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium">
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
                           {item.tvInfo?.duration === "m" ||
                           item.tvInfo?.duration === "?" ||
                           item.duration === "m" ||
@@ -225,38 +225,38 @@ const CategoryCard = React.memo(
                   </div>
                   {(item.tvInfo?.rating === "18+" ||
                     item?.adultContent === true) && (
-                    <div className="text-white px-3 py-1 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[14px] font-bold">
+                    <div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
                       18+
                     </div>
                   )}
-                  <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/90 to-transparent">
+                  <div className="absolute bottom-0 left-0 right-0 p-3 pb-2 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
                     <div className="flex items-center justify-start w-full space-x-1.5 z-[100] flex-wrap gap-y-1.5">
                       {item.tvInfo?.sub && (
-                        <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5">
+                        <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
                           <FontAwesomeIcon
                             icon={faClosedCaptioning}
-                            className="text-[10px]"
+                            className="text-[11px]"
                           />
-                          <p className="text-[10px] font-medium">
+                          <p className="text-[11px] font-medium">
                             {item.tvInfo.sub}
                           </p>
                         </div>
                       )}
                       {item.tvInfo?.dub && (
-                        <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-1.5 text-white py-0.5">
+                        <div className="flex space-x-0.5 justify-center items-center bg-[#2a2a2a] rounded-[2px] px-2 text-white py-1">
                           <FontAwesomeIcon
                             icon={faMicrophone}
-                            className="text-[10px]"
+                            className="text-[11px]"
                           />
-                          <p className="text-[10px] font-medium">
+                          <p className="text-[11px] font-medium">
                             {item.tvInfo.dub}
                           </p>
                         </div>
                       )}
-                      <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium">
+                      <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
                         {item.tvInfo.showType.split(" ").shift()}
                       </div>
-                      <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium">
+                      <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
                         {item.tvInfo?.duration === "m" ||
                         item.tvInfo?.duration === "?" ||
                         item.duration === "m" ||
diff --git a/src/components/continue/ContinueWatching.jsx b/src/components/continue/ContinueWatching.jsx
index 4d7d77b..cc3c786 100644
--- a/src/components/continue/ContinueWatching.jsx
+++ b/src/components/continue/ContinueWatching.jsx
@@ -107,17 +107,17 @@ const ContinueWatching = () => {
                   </div>
                 </Link>
                 {item?.adultContent === true && (
-                  <div className="text-white px-3 py-1 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[14px] font-bold">
+                  <div className="text-white px-2 py-0.5 rounded-lg bg-red-600 absolute top-3 left-3 flex items-center justify-center text-[12px] font-bold">
                     18+
                   </div>
                 )}
-                <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black via-black/90 to-transparent">
-                  <p className="text-gray-100 text-md font-bold text-left truncate mb-2 max-[450px]:text-sm">
+                <div className="absolute bottom-0 left-0 right-0 p-3 pb-2 bg-gradient-to-t from-black/90 via-black/60 to-transparent">
+                  <p className="text-white text-[15px] font-bold text-left truncate mb-1.5 max-[450px]:text-sm drop-shadow-lg">
                     {language === "EN"
                       ? item?.title
                       : item?.japanese_title}
                   </p>
-                  <p className="text-gray-400 text-sm font-medium text-left max-[450px]:text-[12px]">
+                  <p className="text-gray-200 text-[13px] font-semibold text-left max-[450px]:text-[12px] drop-shadow-md">
                     Episode {item.episodeNum}
                   </p>
                 </div>