From a473595ed239d68444508f42fae4ce452e797dbe Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Thu, 19 Feb 2026 01:59:12 +0530
Subject: [PATCH] home page done

---
 src/components/banner/Banner.jsx              |  7 ++---
 src/components/categorycard/CategoryCard.jsx  |  2 +-
 src/components/footer/Footer.jsx              |  2 +-
 src/components/genres/Genre.jsx               |  8 +++---
 src/components/spotlight/Spotlight.jsx        |  5 ++--
 .../tabbed-anime/TabbedAnimeSection.jsx       |  7 ++---
 src/components/trending/Trending.jsx          |  2 +-
 src/pages/Home/Home.jsx                       | 26 ++++++++++++++-----
 8 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/src/components/banner/Banner.jsx b/src/components/banner/Banner.jsx
index d67ac3b..d6fb28a 100644
--- a/src/components/banner/Banner.jsx
+++ b/src/components/banner/Banner.jsx
@@ -14,13 +14,14 @@ import "./Banner.css";
 function Banner({ item, index }) {
   const { language } = useLanguage();
   return (
-    <section className="spotlight w-full h-full relative rounded-2xl overflow-hidden">
+    <section className="spotlight w-full h-full relative rounded-md overflow-hidden">
       <img
         src={`${item.poster}`}
         alt={getSafeTitle(item.title, language, item.japanese_title)}
-        className="absolute inset-0 object-cover w-full h-full rounded-2xl"
+        className="absolute inset-0 object-cover w-full h-full rounded-md"
+        draggable="false"
       />
-      <div className="spotlight-overlay absolute inset-0 z-[1] rounded-2xl"></div>
+      <div className="spotlight-overlay absolute inset-0 z-[1] rounded-md"></div>
 
       <div className="absolute flex flex-col left-0 bottom-[40px] w-[55%] p-4 z-[2] max-[1390px]:w-[45%] max-[1390px]:bottom-[40px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-md:bottom-[20px] max-[300px]:w-full">
         <p className="text-[#ffbade] font-semibold text-[20px] w-fit max-[1300px]:text-[15px]">
diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index 5a0dd8f..4781191 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -201,7 +201,7 @@ const CategoryCard = React.memo(
               ))}
             </div>
           )}
-          <div className={`grid ${cardStyle || 'grid-cols-6 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 ${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`}>
             {itemsToRender.remainingItems.map((item, index) => (
               <div
                 key={index}
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 93e7de1..349108f 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -86,7 +86,7 @@ function Footer() {
               hosts and providers. {website_name} is not responsible for any media
               files shown by the video providers.
             </p>
-            <p>© {website_name}. All rights reserved.</p>
+            <p>© 2026 <a href="https://justanime.site" className="hover:text-white/60 underline transition-colors">{website_name}</a>. All rights reserved.</p>
           </div>
         </div>
       </div>
diff --git a/src/components/genres/Genre.jsx b/src/components/genres/Genre.jsx
index dd7c60e..fb89543 100644
--- a/src/components/genres/Genre.jsx
+++ b/src/components/genres/Genre.jsx
@@ -23,10 +23,10 @@ function Genre({ data }) {
   }, []);
 
   return (
-    <div className="relative pt-[20px] max-sm:pt-[15px]">
+    <div className="relative pt-2 max-sm:pt-[15px]">
       <div className="relative flex items-center min-h-[32px] max-sm:min-h-[28px]">
         {/* Content first for proper stacking */}
-        <div 
+        <div
           ref={scrollContainerRef}
           className="absolute inset-0 overflow-x-auto no-scrollbar scroll-smooth"
           style={{
@@ -51,7 +51,7 @@ function Genre({ data }) {
 
         {/* Left button and gradient */}
         <div className="relative z-20 flex items-center">
-          <button 
+          <button
             onClick={() => scroll('left')}
             className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95"
           >
@@ -68,7 +68,7 @@ function Genre({ data }) {
         {/* Right button and gradient */}
         <div className="relative z-20 flex items-center">
           <div className="h-8 max-sm:h-7 w-20 max-sm:w-12 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent max-sm:from-[#0a0a0a]/60 max-sm:via-[#0a0a0a]/40 pointer-events-none"></div>
-          <button 
+          <button
             onClick={() => scroll('right')}
             className="bg-[#1a1a1a] hover:bg-[#252525] h-8 max-sm:h-7 w-8 max-sm:w-7 flex items-center justify-center rounded-[4px] transition-all duration-300 ease-in-out focus:outline-none active:scale-95"
           >
diff --git a/src/components/spotlight/Spotlight.jsx b/src/components/spotlight/Spotlight.jsx
index a38e4e0..97c2cc6 100644
--- a/src/components/spotlight/Spotlight.jsx
+++ b/src/components/spotlight/Spotlight.jsx
@@ -17,7 +17,8 @@ const Spotlight = ({ spotlights }) => {
               spaceBetween={0}
               slidesPerView={1}
               loop={true}
-              allowTouchMove={false}
+              allowTouchMove={true}
+              grabCursor={true}
               navigation={{
                 nextEl: ".button-next",
                 prevEl: ".button-prev",
@@ -31,7 +32,7 @@ const Spotlight = ({ spotlights }) => {
                 disableOnInteraction: false,
               }}
               modules={[Navigation, Autoplay, Pagination]}
-              className="h-[450px] max-[1390px]:h-full rounded-2xl overflow-hidden relative"
+              className="h-[450px] max-[1390px]:h-full rounded-md overflow-hidden relative"
               style={{
                 "--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
                 "--swiper-pagination-bullet-inactive-opacity": "1",
diff --git a/src/components/tabbed-anime/TabbedAnimeSection.jsx b/src/components/tabbed-anime/TabbedAnimeSection.jsx
index e1c8416..40cfa47 100644
--- a/src/components/tabbed-anime/TabbedAnimeSection.jsx
+++ b/src/components/tabbed-anime/TabbedAnimeSection.jsx
@@ -4,7 +4,7 @@ import CategoryCard from "@/src/components/categorycard/CategoryCard.jsx";
 import { Link } from "react-router-dom";
 import { FaChevronRight } from "react-icons/fa";
 
-function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, className = "" }) {
+function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, className = "", limit = 10 }) {
   const [activeTab, setActiveTab] = useState("airing");
 
   const tabs = [
@@ -24,7 +24,7 @@ function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, classNam
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
               className={`relative px-6 py-4 text-[15px] font-medium transition-all duration-300 
-                ${activeTab === tab.id 
+                ${activeTab === tab.id
                   ? "text-white after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-primary after:rounded-t-full"
                   : "text-[#ffffff80] hover:text-white"
                 }
@@ -55,8 +55,9 @@ function TabbedAnimeSection({ topAiring, mostFavorite, latestCompleted, classNam
       <CategoryCard
         data={activeTabData.data}
         path={activeTabData.path}
-        limit={12}
+        limit={limit}
         showViewMore={false}
+        cardStyle="grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3"
       />
     </div>
   );
diff --git a/src/components/trending/Trending.jsx b/src/components/trending/Trending.jsx
index cfde3de..e400ce1 100644
--- a/src/components/trending/Trending.jsx
+++ b/src/components/trending/Trending.jsx
@@ -12,7 +12,7 @@ const Trending = ({ trending, className }) => {
   const { language } = useLanguage();
 
   return (
-    <div className={`bg-[#141414] rounded-lg p-4 ${className}`}>
+    <div className={`bg-[#141414] rounded-lg py-4 px-1.5 ${className}`}>
       <div className="flex items-center gap-2 mb-4">
         <FontAwesomeIcon icon={faFire} className="text-white/90" />
         <h2 className="text-xl font-semibold text-white">Trending Now</h2>
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 2dd6a9e..2c0d861 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from "react";
 import website_name from "@/src/config/website.js";
 import Spotlight from "@/src/components/spotlight/Spotlight.jsx";
 import Trending from "@/src/components/trending/Trending.jsx";
@@ -19,6 +20,17 @@ import {
 
 function Home() {
   const { homeInfo, homeInfoLoading, error } = useHomeInfo();
+  const [itemLimit, setItemLimit] = useState(window.innerWidth > 1400 ? 10 : 12);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setItemLimit(window.innerWidth > 1400 ? 10 : 12);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   if (homeInfoLoading) return <Loader type="home" />;
   if (error) return <Error />;
   if (!homeInfo) return <Error error="404" />;
@@ -63,26 +75,28 @@ function Home() {
         </div>
         <ContinueWatching />
 
-        <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
+        <div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-4 max-[1200px]:flex flex-col">
           <div>
             <CategoryCard
               label="Latest Episode"
               data={homeInfo.latest_episode}
-              className="mt-[60px]"
+              className="mt-8"
               path="recently-updated"
-              limit={12}
+              limit={itemLimit}
+              cardStyle="grid-cols-5 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3"
             />
             <Schedule className="mt-8" />
             <TabbedAnimeSection
               topAiring={homeInfo.top_airing}
               mostFavorite={homeInfo.most_favorite}
               latestCompleted={homeInfo.latest_completed}
-              className="mt-8"
+              className="mt-4"
+              limit={itemLimit}
             />
           </div>
-          <div className="w-full mt-[60px]">
+          <div className="w-full mt-8">
             <Trending trending={homeInfo.trending} />
-            <Topten data={homeInfo.topten} className="mt-12" />
+            <Topten data={homeInfo.topten} className="mt-8" />
           </div>
         </div>
       </div>