Manga Update (Munchyroll V2)

.env.example

@@ -26,4 +26,4 @@ NEXT_PUBLIC_UMAMI_WEBSITE_ID=''
 
 # NextJS Telemetry Option [OPTIONAL]
 # Description: Set this to 1 to disable metrics. Leave blank otherwise
-NEXT_TELEMETRY_DISABLED='1'
+NEXT_TELEMETRY_DISABLED='1'

components/GoogleAnalytics.jsx

@@ -49,4 +49,4 @@ const GoogleAnalytics = () => {
   );
 };
 
-export default GoogleAnalytics;
+export default GoogleAnalytics;

components/LandingPage.jsx

@@ -1,101 +1,61 @@
-import { useState, useEffect } from "react";
-
 import Link from "next/link";
-import Image from "next/image";
-import PrimaryButton from "./buttons/PrimaryButton";
-import SearchInput from "./small-components/SearchInput";
 
 function LandingPage() {
-  const [hour, setHour] = useState();
-
-  useEffect(() => {
-    const time = new Date();
-    setHour(time.getHours());
-  });
-
-  var backgroundClass;
-  var welcomeMessage;
-
-  // Define the time ranges for day and night
-  const dawn = "06"; // 6 AM
-  const noon = "12"; // 12 PM
-  const dusk = "16"; // 4 PM
-  const night = "20"; // 8 PM
-
-  if (hour >= dawn && hour < noon) {
-    backgroundClass = "from-[#CF9E57] to-[#19547B]";
-    welcomeMessage = "Good morning 🌅";
-  } else if (hour >= noon && hour < dusk) {
-    backgroundClass = "from-[#507b98] to-[#003973]";
-    welcomeMessage = "Good afternoon 🏙️";
-  } else if (hour >= dusk && hour < night) {
-    backgroundClass = "from-[#7b3737] to-[#2C3E50]";
-    welcomeMessage = "Good evening 🌇";
-  } else {
-    backgroundClass = "from-[#141E30] to-[#243B55]";
-    welcomeMessage = "Good night 🌃";
-  }
-
   return (
     <div
-      className={`min-h-screen justify-center relative flex items-center bg-gradient-to-t ${backgroundClass}`}
+      className={`min-h-screen justify-center relative flex items-center text-primary dark:text-secondary`}
     >
-      <div className="custom-shape-divider-bottom-1682184498 max-md:hidden">
-        <svg
-          data-name="Layer 1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 1200 120"
-          preserveAspectRatio="none"
-        >
-          <path
-            d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
-            opacity=".25"
-            className="shape-fill"
-          ></path>
-          <path
-            d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
-            opacity=".5"
-            className="shape-fill"
-          ></path>
-          <path
-            d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
-            className="shape-fill"
-          ></path>
-        </svg>
-      </div>
-      <div className="px-10 max-w-screen-xl w-full mx-auto relative md:flex items-center space-y-10 justify-between ">
-        <div className=" text-secondary  font-semibold">
-          <h1 className=" text-4xl font-bold">Munchyroll</h1>
-          <h1 className=" text-4xl font-medium text-secondary-light">
-            No ads. Just anime.
-          </h1>
-          <br></br>
-          <h1 className=" text-2xl font-medium text-secondary-light">
-            {welcomeMessage}
-          </h1>
-          <h1 className=" text-2xl font-medium text-secondary-light">
-            Share this with friends!
-          </h1>
+      <div className="max-md:mt-2 max-w-screen-xl w-full relative -mt-48 items-center flex justify-center align-center min-h-screen flex-col">
+        <div className="text-center space-y-4">
+          <h1 className="text-6xl font-bold">Munchyroll</h1>
+          <p className="text-primary dark:text-secondary text-base leading-6">
+            Munchyroll is an entertainment platform for people looking to<br />watch millions of movies, series, and animes for free.
+          </p>
         </div>
-
-        <div className="lg:pb-36 md:pb-36">
-          <div>
-            <Image
-              src="/nilou.png"
-              width={160}
-              height={160}
-              alt="Nilou" 
-            />
-        </div>
-          <SearchInput isLandingPage={true} />
-          <div className="sm:w-[400px]">
-            <Link href="/home">
-              <PrimaryButton isLandingPage={true}>Home</PrimaryButton>
-            </Link>
-          </div>
+        <div className="space-y-8">
+            <div className="mx-auto max-w-5xl p-6 sm:p-8">
+              <div className="flex flex-col gap-6">
+                <div className="grid gap-6 md:grid-cols-2">
+                  <Link title="Go to anime homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/anime">
+                    <div className="grid gap-4">
+                      <h4 className="text-xl text-primary dark:text-secondary">
+                        Anime <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
+                      </h4>
+                      <p className="text-base opacity-75 text-primary dark:text-secondary">Explore new anime series!</p>
+                    </div>
+                  </Link>
+                  <Link title="Go to manga homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/manga">
+                    <div className="grid gap-4">
+                      <h4 className="text-xl text-primary dark:text-secondary">
+                        Manga <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
+                      </h4>
+                      <p className="text-base opacity-75 text-primary dark:text-secondary">Read the latest chapters!</p>
+                    </div>
+                  </Link>
+                  {/* <Link title="Go to movies homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/movies">
+                    <div className="grid gap-4">
+                      <h4 className="text-xl text-primary dark:text-secondary">
+                        Movies <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
+                      </h4>
+                      <p className="text-base opacity-75 text-primary dark:text-secondary">In development...</p>
+                    </div>
+                  </Link>
+                  <Link title="Go to shows homepage" className="flex flex-col justify-between gap-6 rounded-3xl border border-primary dark:border-secondary p-6 transition-all hover:-mt-2 hover:mb-2 bg-secondary-light dark:bg-[#222222] text-center" href="/shows">
+                    <div className="grid gap-4">
+                      <h4 className="text-xl text-primary dark:text-secondary">
+                        Shows <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span>
+                      </h4>
+                      <p className="text-base opacity-75 text-primary dark:text-secondary">In development...</p>
+                    </div>
+                  </Link> */}
+                </div>
+              </div>
+            </div>
         </div>
-
       </div>
+
+
+
     </div>
   );
 }

components/anime/AnimeCard.jsx

@@ -0,0 +1,79 @@
+import Link from "next/link";
+import { FaCalendar, FaBook, FaStar, FaPlay } from 'react-icons/fa';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
+import Status from "../ui/Status";
+
+function AnimeCard({ data }) {
+  const type = {
+    TV: "TV",
+    MOVIE: "Movie",
+    OVA: "OVA",
+    ONA: "ONA",
+    SPECIAL: "Special",
+  }
+
+  return (
+    <>
+      <Link href={"/anime/info/" + data.id}>
+        <div className="sm:p-3 ">
+          <div className="overflow-hidden relative rounded-lg aspect-[5/7]">
+            <div className="group absolute inset-0">
+              <div className="transition-all transform duration-300 group-hover:scale-105 group-hover:brightness-50">
+                <LazyLoadImage
+                  effect="blur"
+                  className="w-full h-full aspect-[5/7] object-cover rounded-lg"
+                  src={data.image}
+                  alt=""
+                />
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                <FaPlay className="text-4xl" />
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div className="mt-2 rounded-md flex items-center space-x-1 hover:bg-neutral-300 dark:hover:bg-neutral-800">
+              <Status status={data.status} />
+              <p title={data.title.english || data.title.romaji} className="transition-all dark:text-secondary text-primary font-bold line-clamp-1 text-sm rounded p-1">
+                {data.title.english || data.title.romaji}
+              </p>
+            </div>
+            {/* <p>Episode {data.episodeNumber}</p> */}
+            <div className="text-xs sm:text-sm flex space-x-2 mt-2 select-none">
+              <div className="dark:text-secondary text-primary flex items-center">
+                {data.releaseDate && (
+                  <p>
+                    <span title={`Released: ${data.releaseDate}`} className="dark:text-secondary text-primary flex items-center">
+                      <FaCalendar />
+                      <span className="ml-1">{data.releaseDate}</span>
+                    </span>
+                  </p>
+                )}
+              </div>
+              {data.totalEpisodes && data.totalEpisodes != 1 && (
+                <p>
+                  <span title={`Episodes: ${data.totalEpisodes}`} className="dark:text-secondary text-primary flex items-center">
+                    <FaBook />
+                    <span className="ml-1">{data.totalEpisodes}</span>
+                  </span>
+                </p>
+              )}
+              {data.rating && (
+                <p>
+                  <span title={`Rating: ${data.rating}`} className="dark:text-secondary text-primary flex items-center">
+                    <FaStar />
+                    <span className="ml-1">{data.rating}</span>
+                  </span>
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+}
+
+export default AnimeCard;