home page improved

src/pages/Home/Home.jsx

@@ -1,7 +1,6 @@
 import website_name from "@/src/config/website.js";
 import Spotlight from "@/src/components/spotlight/Spotlight.jsx";
 import Trending from "@/src/components/trending/Trending.jsx";
-import Cart from "@/src/components/cart/Cart.jsx";
 import CategoryCard from "@/src/components/categorycard/CategoryCard.jsx";
 import Genre from "@/src/components/genres/Genre.jsx";
 import Topten from "@/src/components/topten/Topten.jsx";
@@ -10,6 +9,7 @@ import Error from "@/src/components/error/Error.jsx";
 import { useHomeInfo } from "@/src/context/HomeInfoContext.jsx";
 import Schedule from "@/src/components/schedule/Schedule";
 import ContinueWatching from "@/src/components/continue/ContinueWatching";
+import TabbedAnimeSection from "@/src/components/tabbed-anime/TabbedAnimeSection";
 
 function Home() {
   const { homeInfo, homeInfoLoading, error } = useHomeInfo();
@@ -24,56 +24,27 @@ function Home() {
           <Genre data={homeInfo.genres} />
         </div>
         <ContinueWatching />
-        <Trending trending={homeInfo.trending} />
-        <div className="mt-10 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1">
-          <Cart
-            label="Top Airing"
-            data={homeInfo.top_airing}
-            path="top-airing"
-          />
-          <Cart
-            label="Most Popular"
-            data={homeInfo.most_popular}
-            path="most-popular"
-          />
-          <Cart
-            label="Most Favorite"
-            data={homeInfo.most_favorite}
-            path="most-favorite"
-          />
-          <Cart
-            label="Latest Completed"
-            data={homeInfo.latest_completed}
-            path="completed"
-          />
-        </div>
+        
         <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-4">
           <div>
             <CategoryCard
               label="Latest Episode"
               data={homeInfo.latest_episode}
-              className={"mt-[60px]"}
+              className="mt-[60px]"
               path="recently-updated"
               limit={12}
             />
-            <CategoryCard
-              label={`New On ${website_name}`}
-              data={homeInfo.recently_added}
-              className={"mt-[60px]"}
-              path="recently-added"
-              limit={12}
-            />
-            <Schedule />
-            <CategoryCard
-              label="Top Upcoming"
-              data={homeInfo.top_upcoming}
-              className={"mt-[30px]"}
-              path="top-upcoming"
-              limit={12}
+            <Schedule className="mt-8" />
+            <TabbedAnimeSection 
+              topAiring={homeInfo.top_airing}
+              mostFavorite={homeInfo.most_favorite}
+              latestCompleted={homeInfo.latest_completed}
+              className="mt-8"
             />
           </div>
           <div className="w-full mt-[60px]">
-            <Topten data={homeInfo.topten} className={"mt-12"} />
+            <Trending trending={homeInfo.trending} />
+            <Topten data={homeInfo.topten} className="mt-12" />
           </div>
         </div>
       </div>

src/pages/category/Category.jsx

@@ -51,17 +51,6 @@ function Category({ path, label }) {
 
   return (
     <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
-      <div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
-        <img
-          src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
-          alt="Share Anime"
-          className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px] max-[575px]:hidden"
-        />
-        <div className="flex flex-col w-fit">
-          <p className="text-[15px] font-bold text-[#FFBADE]">Share Anime</p>
-          <p className="text-[16px] text-white">to your friends</p>
-        </div>
-      </div>
       {categoryInfo ? (
         <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10">
           {page > totalPages ? (

src/pages/watch/Watch.jsx

@@ -9,17 +9,14 @@ import IframePlayer from "@/src/components/player/IframePlayer";
 import Episodelist from "@/src/components/episodelist/Episodelist";
 import website_name from "@/src/config/website";
 import Sidecard from "@/src/components/sidecard/Sidecard";
-import CategoryCard from "@/src/components/categorycard/CategoryCard";
 import {
   faClosedCaptioning,
   faMicrophone,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Servers from "@/src/components/servers/Servers";
-import CategoryCardLoader from "@/src/components/Loader/CategoryCard.loader";
 import { Skeleton } from "@/src/components/ui/Skeleton/Skeleton";
 import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
-import Voiceactor from "@/src/components/voiceactor/Voiceactor";
 import Watchcontrols from "@/src/components/watchcontrols/Watchcontrols";
 import useWatchControl from "@/src/hooks/useWatchControl";
 import Player from "@/src/components/player/Player";