search + category card

src/components/categorycard/CategoryCard.jsx

@@ -113,6 +113,7 @@ const CategoryCard = React.memo(
     cardStyle,
     path,
     limit,
+    gridClass,
   }) => {
     const { language } = useLanguage();
     const navigate = useNavigate();
@@ -143,7 +144,7 @@ const CategoryCard = React.memo(
 
     return (
       <div className={`w-full ${className}`}>
-        <div className="flex items-center justify-between mb-8">
+        <div className="flex items-center justify-between mb-4">
           <h1 className="font-semibold text-2xl text-white max-[478px]:text-[18px] capitalize tracking-wide">
             {label}
           </h1>
@@ -162,7 +163,7 @@ const CategoryCard = React.memo(
         </div>
         <>
           {categoryPage && itemsToRender.firstRow.length > 0 && (
-            <div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-8 max-[758px]:hidden">
+            <div className="grid grid-cols-4 gap-x-3 gap-y-8 transition-all duration-300 ease-in-out mt-2 max-[758px]:hidden">
               {itemsToRender.firstRow.map((item, index) => (
                 <AnimeCard
                   key={index}
@@ -175,7 +176,7 @@ const CategoryCard = React.memo(
               ))}
             </div>
           )}
-          <div className={`grid ${cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-6 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
+          <div className={`grid ${gridClass || cardStyle || 'grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3'} gap-x-3 gap-y-8 mt-2 transition-all duration-300 ease-in-out max-[478px]:gap-x-2`}>
             {itemsToRender.remainingItems.map((item, index) => (
               <AnimeCard
                 key={index}

src/components/continue/ContinueWatching.jsx

@@ -35,7 +35,7 @@ const ContinueWatching = () => {
 
   return (
     <div className="mt-8">
-      <div className="flex items-center justify-between max-md:pl-4 mb-6">
+      <div className="flex items-center justify-between max-md:pl-4 mb-3">
         <div className="flex items-center gap-x-3 justify-center">
           <FaHistory className="text-gray-200 text-xl" />
           <h1 className="text-gray-200 text-2xl font-bold tracking-tight max-[450px]:text-xl max-[450px]:mb-1 max-[350px]:text-lg">

src/components/topten/Topten.jsx

@@ -50,7 +50,7 @@ function Topten({ data, className }) {
   };
 
   return (
-    <div className={`flex flex-col space-y-4 ${className}`}>
+    <div className={`flex flex-col space-y-2 ${className}`}>
       <div className="flex justify-between items-center max-[350px]:flex-col max-[350px]:gap-y-2 max-[350px]:items-start">
         <h1 className="font-bold text-2xl text-white tracking-tight">Top 10</h1>
         <ul className="flex justify-between w-fit bg-[#1a1a1a] rounded-lg overflow-hidden shadow-lg">

src/components/trending/Trending.jsx

@@ -13,11 +13,11 @@ const Trending = ({ trending, className }) => {
 
   return (
     <div className={`bg-[#141414] rounded-lg py-4 px-1.5 ${className}`}>
-      <div className="flex items-center gap-2 mb-4">
+      <div className="flex items-center gap-2 mb-2">
         <FontAwesomeIcon icon={faFire} className="text-white/90" />
         <h2 className="text-xl font-semibold text-white">Trending Now</h2>
       </div>
-      <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">
+      <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`}>
         {trending &&
           trending.map((item, index) => (
             <div key={index} className="group">

src/pages/search/Search.jsx

@@ -43,7 +43,7 @@ function Search() {
         setSearchParams({ keyword, page: newPage });
     };
 
-    const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
+    const searchGridClass = "grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:gap-x-2";
 
     const { title, description, keywords } = generateSearchMeta(keyword);
     const canonicalUrl = generateCanonicalUrl(`/search?keyword=${keyword || ''}${page > 1 ? `&page=${page}` : ''}`);