From 20fce020c27504bcbdee559046e4bb33bd2ec0ed Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Sun, 27 Jul 2025 19:39:31 +0530
Subject: [PATCH] info page in progress

---
 src/pages/animeInfo/AnimeInfo.jsx | 443 +++++++++++++-----------------
 src/pages/category/Category.jsx   |   2 +-
 src/pages/watch/Watch.jsx         |   2 +-
 3 files changed, 200 insertions(+), 247 deletions(-)

diff --git a/src/pages/animeInfo/AnimeInfo.jsx b/src/pages/animeInfo/AnimeInfo.jsx
index 89f0e3c..a59b931 100644
--- a/src/pages/animeInfo/AnimeInfo.jsx
+++ b/src/pages/animeInfo/AnimeInfo.jsx
@@ -19,9 +19,9 @@ import Voiceactor from "@/src/components/voiceactor/Voiceactor";
 function InfoItem({ label, value, isProducer = true }) {
   return (
     value && (
-      <div className="text-[14px] font-bold">
-        {`${label}: `}
-        <span className="font-light">
+      <div className="text-[14px] font-medium transition-all duration-300">
+        <span className="text-gray-400">{`${label}: `}</span>
+        <span className="font-light text-white/90">
           {Array.isArray(value) ? (
             value.map((item, index) =>
               isProducer ? (
@@ -32,7 +32,7 @@ function InfoItem({ label, value, isProducer = true }) {
                     .join("-")
                     .replace(/-+/g, "-")}`}
                   key={index}
-                  className="cursor-pointer hover:text-[#ffbade]"
+                  className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
                 >
                   {item}
                   {index < value.length - 1 && ", "}
@@ -50,7 +50,7 @@ function InfoItem({ label, value, isProducer = true }) {
                 .split(" ")
                 .join("-")
                 .replace(/-+/g, "-")}`}
-              className="cursor-pointer hover:text-[#ffbade]"
+              className="cursor-pointer transition-colors duration-300 hover:text-gray-300"
             >
               {value}
             </Link>
@@ -66,12 +66,9 @@ function InfoItem({ label, value, isProducer = true }) {
 function Tag({ bgColor, index, icon, text }) {
   return (
     <div
-      className={`flex space-x-1 justify-center items-center px-[4px] py-[1px] text-black font-bold text-[13px] ${
-        index === 0 ? "rounded-l-[4px]" : "rounded-none"
-      }`}
-      style={{ backgroundColor: bgColor }}
+      className={`flex space-x-1 justify-center items-center px-3 py-1 text-white backdrop-blur-md bg-white/10 font-medium text-[13px] rounded-full transition-all duration-300 hover:bg-white/20`}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="text-[12px]" />}
+      {icon && <FontAwesomeIcon icon={icon} className="text-[12px] mr-1" />}
       <p className="text-[12px]">{text}</p>
     </div>
   );
@@ -154,262 +151,218 @@ function AnimeInfo({ random = false }) {
   ];
 
   return (
-    <>
-      <div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden text-white mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]">
-        <img
-          src={`${poster}`}
-          alt={`${title} Poster`}
-          className="absolute inset-0 object-cover w-full h-full filter grayscale blur-lg z-[-900]"
-        />
-        <div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center">
-          <div className="relative w-[180px] h-[270px] max-[575px]:w-[140px] max-[575px]:h-[200px] flex-shrink-0">
-            <img
-              src={`${poster}`}
-              alt={`${title} Poster`}
-              className="w-full h-full object-cover object-center flex-shrink-0"
-            />
-            {animeInfo.adultContent && (
-              <div className="text-white px-2 rounded-md bg-[#FF5700] absolute top-2 left-2 flex items-center justify-center text-[14px] font-bold">
-                18+
+    <div className="min-h-screen bg-[#0a0a0a] text-white">
+      <div className="relative w-full overflow-hidden mt-[64px] max-md:mt-[50px]">
+        {/* Background Image with Gradient Overlay */}
+        <div className="absolute inset-0 z-0">
+          <img
+            src={`${poster}`}
+            alt={`${title} Background`}
+            className="w-full h-full object-cover filter blur-lg opacity-30"
+          />
+          <div className="absolute inset-0 bg-gradient-to-b from-[#121212]/80 via-[#121212]/95 to-[#121212]"></div>
+        </div>
+
+        {/* Main Content */}
+        <div className="relative z-10 container mx-auto px-4 py-16">
+          <div className="flex flex-col lg:flex-row gap-8">
+            {/* Poster Section */}
+            <div className="flex-shrink-0">
+              <div className="relative w-[220px] h-[330px] rounded-xl overflow-hidden shadow-2xl mx-auto lg:mx-0">
+                <img
+                  src={`${poster}`}
+                  alt={`${title} Poster`}
+                  className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
+                />
+                {animeInfo.adultContent && (
+                  <div className="absolute top-3 left-3 px-3 py-1 bg-red-500/90 backdrop-blur-sm rounded-full text-sm font-semibold">
+                    18+
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-          <div className="flex flex-col ml-4 gap-y-5 max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-6 max-[1200px]:ml-0">
-            <ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden">
-              {[
-                ["Home", "home"],
-                [info.tvInfo?.showType, info.tvInfo?.showType],
-              ].map(([text, link], index) => (
-                <li key={index} className="flex gap-x-3 items-center">
-                  <Link
-                    to={`/${link}`}
-                    className="text-white hover:text-[#FFBADE] text-[15px] font-semibold"
-                  >
-                    {text}
-                  </Link>
-                  <div className="dot mt-[1px] bg-white"></div>
-                </li>
-              ))}
-              <p className="font-light text-[15px] text-gray-300 line-clamp-1 max-[575px]:leading-5">
+            </div>
+
+            {/* Info Section */}
+            <div className="flex-1 space-y-6">
+              {/* Title */}
+              <h1 className="text-4xl lg:text-5xl font-bold tracking-tight">
                 {language === "EN" ? title : japanese_title}
-              </p>
-            </ul>
-            <h1 className="text-4xl font-semibold max-[1200px]:text-3xl max-[575px]:text-2xl max-[575px]:text-center  max-[575px]:leading-7">
-              {language === "EN" ? title : japanese_title}
-            </h1>
-            <div className="flex flex-wrap w-fit gap-x-[2px] mt-3 max-[575px]:mx-auto max-[575px]:mt-0 gap-y-[3px] max-[320px]:justify-center">
-              {tags.map(
-                ({ condition, icon, bgColor, text }, index) =>
+              </h1>
+
+              {/* Tags */}
+              <div className="flex flex-wrap gap-2">
+                {tags.map(({ condition, icon, text }, index) =>
                   condition && (
                     <Tag
                       key={index}
                       index={index}
-                      bgColor={bgColor}
                       icon={icon}
                       text={text}
                     />
                   )
-              )}
-              <div className="flex w-fit items-center ml-1">
-                {[info.tvInfo?.showType, info.tvInfo?.duration].map(
-                  (item, index) =>
-                    item && (
-                      <div
-                        key={index}
-                        className="px-1 h-fit flex items-center gap-x-2 w-fit"
-                      >
-                        <div className="dot mt-[2px]"></div>
-                        <p className="text-[14px]">{item}</p>
-                      </div>
-                    )
                 )}
               </div>
-            </div>
-            {animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
-              <Link
-                to={`/watch/${animeInfo.id}`}
-                className="flex gap-x-2 px-6 py-2 bg-[#FFBADE] w-fit text-black items-center rounded-3xl mt-5"
-              >
-                <FontAwesomeIcon
-                  icon={faPlay}
-                  className="text-[14px] mt-[1px]"
-                />
-                <p className="text-lg font-medium">Watch Now</p>
-              </Link>
-            ) : (
-              <div className="flex gap-x-2 px-6 py-2 bg-[#FFBADE] w-fit text-black items-center rounded-3xl mt-5">
-                <p className="text-lg font-medium">Not released</p>
-              </div>
-            )}
-            {info?.Overview && (
-              <div className="text-[14px] mt-2 max-[575px]:hidden">
-                {info.Overview.length > 270 ? (
-                  <>
-                    {isFull
-                      ? info.Overview
-                      : `${info.Overview.slice(0, 270)}...`}
-                    <span
-                      className="text-[13px] font-bold hover:cursor-pointer"
-                      onClick={() => setIsFull(!isFull)}
-                    >
-                      {isFull ? "- Less" : "+ More"}
-                    </span>
-                  </>
-                ) : (
-                  info.Overview
-                )}
-              </div>
-            )}
-            <p className="text-[14px] max-[575px]:hidden">
-              {`${website_name} is the best site to watch `}
-              <span className="font-bold">{title}</span>
-              {` SUB online, or you can even watch `}
-              <span className="font-bold">{title}</span>
-              {` DUB in HD quality.`}
-            </p>
-            <div className="flex gap-x-4 items-center mt-4 max-[575px]:w-full max-[575px]:justify-center max-[320px]:hidden">
-              <img
-                src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
-                alt="Share Anime"
-                className="w-[60px] h-auto rounded-full max-[1024px]:w-[40px]"
-              />
-              <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>
-          </div>
-        </div>
-        <div className="bg-[#4c4b57c3] flex items-center px-8 max-[1200px]:py-10 max-[1200px]:bg-[#363544e0] max-[575px]:p-4">
-          <div className="w-full flex flex-col h-fit gap-y-3">
-            {info?.Overview && (
-              <div className="custom-xl:hidden max-h-[150px] overflow-hidden">
-                <p className="text-[13px] font-bold">Overview:</p>
-                <div className="max-h-[110px] mt-2 overflow-y-scroll">
-                  <p className="text-[14px] font-light">{info.Overview}</p>
-                </div>
-              </div>
-            )}
-            {[
-              { label: "Japanese", value: info?.Japanese },
-              { label: "Synonyms", value: info?.Synonyms },
-              { label: "Aired", value: info?.Aired },
-              { label: "Premiered", value: info?.Premiered },
-              { label: "Duration", value: info?.Duration },
-              { label: "Status", value: info?.Status },
-              { label: "MAL Score", value: info?.["MAL Score"] },
-            ].map(({ label, value }, index) => (
-              <InfoItem
-                key={index}
-                label={label}
-                value={value}
-                isProducer={false}
-              />
-            ))}
-            {info?.Genres && (
-              <div className="flex gap-x-2 py-2 custom-xl:border-t custom-xl:border-b custom-xl:border-white/20 max-[1200px]:border-none">
-                <p>Genres:</p>
-                <div className="flex flex-wrap gap-2">
-                  {info.Genres.map((genre, index) => (
-                    <Link
-                      to={`/genre/${genre.split(" ").join("-")}`}
+
+              {/* Details Section */}
+              <div className="space-y-3 py-4 backdrop-blur-md bg-white/5 rounded-xl px-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {[
+                    { label: "Japanese", value: info?.Japanese },
+                    { label: "Synonyms", value: info?.Synonyms },
+                    { label: "Aired", value: info?.Aired },
+                    { label: "Premiered", value: info?.Premiered },
+                    { label: "Duration", value: info?.Duration },
+                    { label: "Status", value: info?.Status },
+                    { label: "MAL Score", value: info?.["MAL Score"] },
+                  ].map((item, index) => (
+                    <InfoItem
                       key={index}
-                      className="text-[14px] font-semibold px-2 py-[1px] border border-gray-400 rounded-2xl hover:text-[#ffbade]"
-                    >
-                      {genre}
-                    </Link>
+                      label={item.label}
+                      value={item.value}
+                      isProducer={false}
+                    />
+                  ))}
+                </div>
+
+                {/* Genres */}
+                {info?.Genres && (
+                  <div className="pt-4 border-t border-white/10">
+                    <p className="text-gray-400 mb-2">Genres</p>
+                    <div className="flex flex-wrap gap-2">
+                      {info.Genres.map((genre, index) => (
+                        <Link
+                          to={`/genre/${genre.split(" ").join("-")}`}
+                          key={index}
+                          className="px-3 py-1 text-sm bg-white/5 rounded-full hover:bg-white/10 transition-colors"
+                        >
+                          {genre}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Studios & Producers */}
+                <div className="space-y-4 pt-4 border-t border-white/10">
+                  {[
+                    { label: "Studios", value: info?.Studios },
+                    { label: "Producers", value: info?.Producers },
+                  ].map((item, index) => (
+                    <InfoItem
+                      key={index}
+                      label={item.label}
+                      value={item.value}
+                    />
                   ))}
                 </div>
               </div>
-            )}
-            {[
-              { label: "Studios", value: info?.Studios },
-              { label: "Producers", value: info?.Producers },
-            ].map(({ label, value }, index) => (
-              <InfoItem key={index} label={label} value={value} />
-            ))}
-            <p className="text-[14px] mt-4 custom-xl:hidden">
-              {`${website_name} is the best site to watch `}
-              <span className="font-bold">{title}</span>
-              {` SUB online, or you can even watch `}
-              <span className="font-bold">{title}</span>
-              {` DUB in HD quality.`}
-            </p>
+
+              {/* Watch Button */}
+              {animeInfo?.animeInfo?.Status?.toLowerCase() !== "not-yet-aired" ? (
+                <Link
+                  to={`/watch/${animeInfo.id}`}
+                  className="inline-flex items-center px-6 py-3 bg-white/10 backdrop-blur-md rounded-full text-white transition-all duration-300 hover:bg-white/20 hover:scale-105 group"
+                >
+                  <FontAwesomeIcon
+                    icon={faPlay}
+                    className="mr-2 text-sm group-hover:text-white"
+                  />
+                  <span className="font-medium">Watch Now</span>
+                </Link>
+              ) : (
+                <div className="inline-flex items-center px-6 py-3 bg-gray-700/50 rounded-full">
+                  <span className="font-medium">Not released</span>
+                </div>
+              )}
+
+              {/* Overview */}
+              {info?.Overview && (
+                <div className="text-gray-300 leading-relaxed max-w-3xl">
+                  {info.Overview.length > 270 ? (
+                    <>
+                      {isFull
+                        ? info.Overview
+                        : `${info.Overview.slice(0, 270)}...`}
+                      <button
+                        className="ml-2 text-white/70 hover:text-white transition-colors text-sm font-medium"
+                        onClick={() => setIsFull(!isFull)}
+                      >
+                        {isFull ? "Show Less" : "Read More"}
+                      </button>
+                    </>
+                  ) : (
+                    info.Overview
+                  )}
+                </div>
+              )}
+
+              {/* Share Section */}
+              <div className="flex items-center space-x-4 pt-4">
+                <img
+                  src="https://media.tenor.com/hJfxLKzDUFcAAAAM/bleach-best-anime.gif"
+                  alt="Share Anime"
+                  className="w-12 h-12 rounded-full"
+                />
+                <div>
+                  <p className="text-sm font-semibold text-white/70">Share Anime</p>
+                  <p className="text-white/50">with your friends</p>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col">
-        <div>
-          {seasons?.length > 0 && (
-            <div className="flex flex-col gap-y-7 mt-8">
-              <h1 className="w-fit text-2xl text-[#ffbade] max-[478px]:text-[18px] font-bold">
-                More Seasons
-              </h1>
-              <div className="flex flex-wrap gap-4 max-[575px]:grid max-[575px]:grid-cols-3 max-[575px]:gap-3 max-[480px]:grid-cols-2">
-                {seasons.map((season, index) => (
-                  <Link
-                    to={`/${season.id}`}
-                    key={index}
-                    className={`relative w-[20%] h-[60px] rounded-lg overflow-hidden cursor-pointer group ${
-                      currentId === String(season.id)
-                        ? "border border-[#ffbade]"
-                        : ""
-                    } max-[1200px]:w-[140px] max-[575px]:w-full`}
-                  >
-                    <p
-                      className={`text-[13px] text-center font-bold absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full px-2 z-30 line-clamp-2 group-hover:text-[#ffbade] ${
-                        currentId === String(season.id)
-                          ? "text-[#ffbade]"
-                          : "text-white"
-                      }`}
-                    >
-                      {season.season}
-                    </p>
-                    <div className="absolute inset-0 z-10 bg-[url('https://i.postimg.cc/pVGY6RXd/thumb.png')] bg-repeat"></div>
-                    <img
-                      src={season.season_poster}
-                      alt=""
-                      className="w-full h-full object-cover blur-[3px] opacity-50"
-                    />
-                  </Link>
-                ))}
-              </div>
-            </div>
-          )}
-          {animeInfo?.charactersVoiceActors.length > 0 && (
-            <Voiceactor animeInfo={animeInfo} />
-          )}
-          {animeInfo.recommended_data.length > 0 && (
-            <CategoryCard
-              label="Recommended for you"
-              data={animeInfo.recommended_data}
-              limit={animeInfo.recommended_data.length}
-              showViewMore={false}
-              className={"mt-8"}
-            />
-          )}
+
+      {/* Seasons Section */}
+      {seasons?.length > 0 && (
+        <div className="container mx-auto px-4 py-12">
+          <h2 className="text-2xl font-bold mb-8">More Seasons</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {seasons.map((season, index) => (
+              <Link
+                to={`/${season.id}`}
+                key={index}
+                className={`relative aspect-video rounded-xl overflow-hidden group ${
+                  currentId === String(season.id)
+                    ? "ring-2 ring-white/20"
+                    : ""
+                }`}
+              >
+                <img
+                  src={season.season_poster}
+                  alt={season.season}
+                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-4">
+                  <p className="text-sm font-medium line-clamp-2">
+                    {season.season}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
         </div>
-        <div>
-          {animeInfo.related_data.length > 0 && (
-            <Sidecard
-              label="Related Anime"
-              data={animeInfo.related_data}
-              className="mt-8"
-            />
-          )}
-          {homeInfo && homeInfo.most_popular && (
-            <Sidecard
-              label="Most Popular"
-              data={homeInfo.most_popular.slice(0, 10)}
-              className="mt-[40px]"
-              limit={10}
-            />
-          )}
+      )}
+
+      {/* Voice Actors Section */}
+      {animeInfo?.charactersVoiceActors.length > 0 && (
+        <div className="container mx-auto px-4 py-12">
+          <Voiceactor animeInfo={animeInfo} />
         </div>
-      </div>
-    </>
+      )}
+
+      {/* Recommendations Section */}
+      {animeInfo.recommended_data.length > 0 && (
+        <div className="container mx-auto px-4 py-12">
+          <CategoryCard
+            label="Recommended for you"
+            data={animeInfo.recommended_data}
+            limit={animeInfo.recommended_data.length}
+            showViewMore={false}
+          />
+        </div>
+      )}
+    </div>
   );
 }
 
diff --git a/src/pages/category/Category.jsx b/src/pages/category/Category.jsx
index 326c61e..acaca32 100644
--- a/src/pages/category/Category.jsx
+++ b/src/pages/category/Category.jsx
@@ -53,7 +53,7 @@ function Category({ path, label }) {
     <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://i.postimg.cc/d34WWyNQ/share-icon.gif"
+          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"
         />
diff --git a/src/pages/watch/Watch.jsx b/src/pages/watch/Watch.jsx
index b2e1fab..7a3b879 100644
--- a/src/pages/watch/Watch.jsx
+++ b/src/pages/watch/Watch.jsx
@@ -491,7 +491,7 @@ export default function Watch() {
       </div>
       <div className="w-full flex gap-x-4 items-center bg-[#191826] p-5 max-[575px]:px-3 max-[320px]:hidden">
         <img
-          src="https://i.postimg.cc/d34WWyNQ/share-icon.gif"
+          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"
         />