From 18e36d8b630ae5f8ba00585fcd6f6aa7b933467b Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Wed, 30 Jul 2025 23:56:26 +0530
Subject: [PATCH] fixing category card

---
 src/components/categorycard/CategoryCard.css | 80 +++++++++++++++++---
 src/components/categorycard/CategoryCard.jsx | 40 +++++-----
 src/components/player/PlayerIcons.jsx        |  9 +--
 src/components/sidecard/Sidecard.jsx         |  3 +
 src/pages/search/Search.jsx                  | 14 +++-
 5 files changed, 105 insertions(+), 41 deletions(-)

diff --git a/src/components/categorycard/CategoryCard.css b/src/components/categorycard/CategoryCard.css
index 04411bc..7766feb 100644
--- a/src/components/categorycard/CategoryCard.css
+++ b/src/components/categorycard/CategoryCard.css
@@ -8,20 +8,78 @@
   bottom: 0;
   background: linear-gradient(
     to top,
-    rgba(32, 31, 49, 1) 0%,
-    rgba(32, 31, 49, 0) 20%,
-    rgba(32, 31, 49, 0) 100%
+    rgba(18, 18, 18, 1) 0%,
+    rgba(18, 18, 18, 0.7) 20%,
+    rgba(18, 18, 18, 0) 60%,
+    rgba(18, 18, 18, 0.2) 100%
   );
-
   z-index: 50;
+  transition: all 0.3s ease-in-out;
 }
+
+.group:hover .overlay {
+  background: linear-gradient(
+    to top,
+    rgba(18, 18, 18, 0.95) 0%,
+    rgba(18, 18, 18, 0.8) 50%,
+    rgba(18, 18, 18, 0.6) 100%
+  );
+}
+
 .dot {
-  width: 5px;
-  height: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.3);
+  width: 3px;
+  height: 3px;
   display: inline-block;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  margin: 0 4px;
+  position: relative;
+  top: -1px;
+}
+
+/* Modern Card Styles */
+.category-card-container {
+  transition: transform 0.3s ease-in-out;
+}
+
+.category-card-container:hover {
+  transform: translateY(-4px);
+}
+
+.category-badge {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  transition: all 0.3s ease;
+}
+
+.category-badge:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.item-title {
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  transition: all 0.2s ease;
+}
+
+.item-title:hover {
+  color: #ffffff;
+  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+}
+
+.play-icon {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.8);
+  transition: all 0.3s ease;
+}
+
+.group:hover .play-icon {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
 }
diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index 742bc24..d3a20a8 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -87,8 +87,8 @@ const CategoryCard = React.memo(
     };
     return (
       <div className={`w-full ${className}`}>
-        <div className="flex items-center justify-between">
-          <h1 className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] capitalize">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
             {label}
           </h1>
           {showViewMore && (
@@ -96,10 +96,10 @@ const CategoryCard = React.memo(
               to={`/${path}`}
               className="flex w-fit items-baseline h-fit rounded-3xl gap-x-1 group"
             >
-              <p className="text-white text-[12px] font-semibold h-fit leading-0 group-hover:text-[#ffbade] transition-all ease-out">
+              <p className="text-gray-300 text-[12px] font-medium h-fit leading-0 group-hover:text-white transition-all ease-out">
                 View more
               </p>
-              <FaChevronRight className="text-white text-[10px] group-hover:text-[#ffbade] transition-all ease-out" />
+              <FaChevronRight className="text-gray-300 text-[10px] group-hover:text-white transition-all ease-out" />
             </Link>
           )}
         </div>
@@ -115,7 +115,7 @@ const CategoryCard = React.memo(
               {itemsToRender.firstRow.map((item, index) => (
                 <div
                   key={index}
-                  className="flex flex-col transition-transform duration-300 ease-in-out"
+                  className="flex flex-col transition-transform duration-300 ease-in-out category-card-container"
                   style={{ height: "fit-content" }}
                   ref={(el) => (cardRefs.current[index] = el)}
                 >
@@ -136,7 +136,7 @@ const CategoryCard = React.memo(
                     {hoveredItem === item.id + index && showPlay && (
                       <FontAwesomeIcon
                         icon={faPlay}
-                        className="text-[40px] text-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[10000]"
+                        className="text-[40px] text-white absolute top-1/2 left-1/2 play-icon z-[10000]"
                       />
                     )}
 
@@ -150,36 +150,36 @@ const CategoryCard = React.memo(
                     </div>
                     {(item.tvInfo?.rating === "18+" ||
                       item?.adultContent === true) && (
-                      <div className="text-white px-2 rounded-md bg-[#FF5700] absolute top-2 left-2 flex items-center justify-center text-[14px] font-bold">
+                      <div className="text-white px-2 py-1 rounded-md bg-black/50 backdrop-blur-sm border border-white/10 absolute top-2 left-2 flex items-center justify-center text-[12px] font-medium">
                         18+
                       </div>
                     )}
-                    <div className="absolute left-2 bottom-3 flex items-center justify-center w-fit space-x-1 z-[100] max-[270px]:flex-col max-[270px]:gap-y-[3px]">
+                    <div className="absolute left-2 bottom-3 flex items-center justify-center w-fit space-x-2 z-[100] max-[270px]:flex-col max-[270px]:gap-y-[3px]">
                       {item.tvInfo?.sub && (
-                        <div className="flex space-x-1 justify-center items-center bg-[#B0E3AF] rounded-[2px] px-[4px] text-black py-[2px]">
+                        <div className="category-badge flex space-x-1 justify-center items-center">
                           <FontAwesomeIcon
                             icon={faClosedCaptioning}
-                            className="text-[12px]"
+                            className="text-[12px] text-white/90"
                           />
-                          <p className="text-[12px] font-bold">
+                          <p className="text-[12px] text-white/90">
                             {item.tvInfo.sub}
                           </p>
                         </div>
                       )}
                       {item.tvInfo?.dub && (
-                        <div className="flex space-x-1 justify-center items-center bg-[#B9E7FF] rounded-[2px] px-[8px] text-black py-[2px]">
+                        <div className="category-badge flex space-x-1 justify-center items-center">
                           <FontAwesomeIcon
                             icon={faMicrophone}
-                            className="text-[12px]"
+                            className="text-[12px] text-white/90"
                           />
-                          <p className="text-[12px] font-bold">
+                          <p className="text-[12px] text-white/90">
                             {item.tvInfo.dub}
                           </p>
                         </div>
                       )}
                       {item.tvInfo?.eps && (
-                        <div className="flex space-x-1 justify-center items-center bg-[#a9a6b16f] rounded-[2px] px-[8px] text-white py-[2px]">
-                          <p className="text-[12px] font-extrabold">
+                        <div className="category-badge flex space-x-1 justify-center items-center">
+                          <p className="text-[12px] text-white/90">
                             {item.tvInfo.eps}
                           </p>
                         </div>
@@ -200,21 +200,21 @@ const CategoryCard = React.memo(
                   </div>
                   <Link
                     to={`/${item.id}`}
-                    className="text-white font-semibold mt-1 item-title hover:text-[#FFBADE] hover:cursor-pointer line-clamp-1"
+                    className="text-gray-100 font-medium mt-2 item-title hover:text-white hover:cursor-pointer line-clamp-1"
                   >
                     {language === "EN" ? item.title : item.japanese_title}
                   </Link>
                   {item.description && (
-                    <div className="line-clamp-3 text-[13px] font-extralight text-[#b1b0b0] max-[1200px]:hidden">
+                    <div className="line-clamp-3 text-[13px] font-light text-gray-400 mt-1 max-[1200px]:hidden">
                       {item.description}
                     </div>
                   )}
                   <div className="flex items-center gap-x-2 w-full mt-2 overflow-hidden">
-                    <div className="text-gray-400 text-[14px] text-nowrap overflow-hidden text-ellipsis">
+                    <div className="text-gray-500 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
                       {item.tvInfo.showType.split(" ").shift()}
                     </div>
                     <div className="dot"></div>
-                    <div className="text-gray-400 text-[14px] text-nowrap overflow-hidden text-ellipsis">
+                    <div className="text-gray-500 text-[13px] text-nowrap overflow-hidden text-ellipsis font-medium">
                       {item.tvInfo?.duration === "m" ||
                       item.tvInfo?.duration === "?" ||
                       item.duration === "m" ||
diff --git a/src/components/player/PlayerIcons.jsx b/src/components/player/PlayerIcons.jsx
index 2410fa3..75e17b1 100644
--- a/src/components/player/PlayerIcons.jsx
+++ b/src/components/player/PlayerIcons.jsx
@@ -73,12 +73,9 @@ const fullScreenOnIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2
 const fullScreenOffIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"width="24" height="24" style="margin-bottom: 5px; vertical-align: middle;"><path d="M109.2,134.9l-8.4,50.1c-0.4,2.7-2.4,3.3-4.4,1.4L82,172l-27.9,27.9l-14.2-14.2l27.9-27.9l-14.4-14.4c-1.9-1.9-1.3-3.9,1.4-4.4l50.1-8.4c1.8-0.5,3.6,0.6,4.1,2.4C109.4,133.7,109.4,134.3,109.2,134.9L109.2,134.9z M172.1,82.1L200,54.2L185.8,40l-27.9,27.9l-14.4-14.4c-1.9-1.9-3.9-1.3-4.4,1.4l-8.4,50.1c-0.5,1.8,0.6,3.6,2.4,4.1c0.5,0.2,1.2,0.2,1.7,0l50.1-8.4c2.7-0.4,3.3-2.4,1.4-4.4L172.1,82.1z"/></svg>`;
 
 const logo = `<p style="display: flex; gap: 7px; align-items: center; background-color:#1F2020; padding:5px;padding-inline:7px; border-radius:5px">
-    <b style="color: #ffbade;">Powered by</b>
-    <span style="font-size: 14px;">
-        Zen<span style="color: #ffbade;">!</span>me
-    </span>
-</p>
-`;
+    <b style="color: white;">Powered by</b>
+    <img src="/logo.png" alt="Zenime Logo" style="height: 20px; object-fit: contain;" />
+</p>`;
 
 export {
   backward10Icon,
diff --git a/src/components/sidecard/Sidecard.jsx b/src/components/sidecard/Sidecard.jsx
index 9cd69bf..7dd0bf4 100644
--- a/src/components/sidecard/Sidecard.jsx
+++ b/src/components/sidecard/Sidecard.jsx
@@ -29,6 +29,9 @@ function Sidecard({ data, label, className }) {
 
   return (
     <div className={`flex flex-col ${className}`}>
+      {label && (
+        <h2 className="font-medium text-lg text-neutral-200 mb-4">{label}</h2>
+      )}
       <div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded">
         {data &&
           data.map((item, index) => (
diff --git a/src/pages/search/Search.jsx b/src/pages/search/Search.jsx
index f52033c..13156d2 100644
--- a/src/pages/search/Search.jsx
+++ b/src/pages/search/Search.jsx
@@ -1,5 +1,4 @@
 import CategoryCard from '@/src/components/categorycard/CategoryCard';
-import Genre from '@/src/components/genres/Genre';
 import CategoryCardLoader from '@/src/components/Loader/CategoryCard.loader';
 import SidecardLoader from '@/src/components/Loader/Sidecard.loader';
 import PageSlider from '@/src/components/pageslider/PageSlider';
@@ -20,7 +19,7 @@ function Search() {
     const [error, setError] = useState(null);
 
     useEffect(() => {
-        const fetchSearch = async () => {
+        const fetchSearch = async () => {   
             setLoading(true);
             try {
                 const data = await getSearch(keyword,page);
@@ -62,8 +61,15 @@ function Search() {
                     <SidecardLoader />
                 ) : (
                     <>
-                        {homeInfo?.most_popular && <Sidecard data={homeInfo.most_popular} className="mt-0" label="Most Popular" />}
-                        {homeInfo?.genres && <Genre data={homeInfo.genres} />}
+                        {homeInfo?.most_popular && (
+                            <div className="bg-[#141414] rounded-lg p-6">
+                                <h2 className="text-xl font-semibold mb-4 text-white">Most Popular</h2>
+                                <Sidecard
+                                    data={homeInfo.most_popular}
+                                    className="!mt-0"
+                                />
+                            </div>
+                        )}
                     </>
                 )}
             </div>