feat: rewamp HomePage ui design

src/index.css

@@ -9,7 +9,7 @@
 
 @layer base {
   body {
-    @apply bg-neutral-950 text-white overflow-hidden;
+    @apply bg-neutral-950 text-white overflow-hidden cursor-default;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -73,13 +73,50 @@
       content-box;
   animation: l6 2s infinite;
 }
-@keyframes colorChange {
-  0% {
-    opacity: 0.99;
-  }
-  100% {
-    opacity: 1;
-  }
+
+.shadow-text {
+  position: absolute;
+  bottom: calc(90% - 40px);
+  font-size: calc(4vw + 4vh);
+  color: rgba(255, 255, 255, 0.1);
+  transform: translateY(20%);
+  z-index: 1;
+  white-space: nowrap;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 80%;
+}
+
+.swiper-pagination {
+  position: absolute;
+  bottom: 30px;
+  right: 110px;
+  z-index: 100;
+  width: fit-content;
+  height: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.swiper-pagination-bullet {
+  width: 10px;
+  height: 10px;
+  margin: 2px;
+  border-radius: 100px;
+  background: rgba(255, 255, 255, 0.2);
+  opacity: 1;
+  transition: width 0.2s, height 0.2s, background 0.2s;
+}
+
+.swiper-pagination-bullet-active {
+  width: 14px;
+  height: 14px;
+  border-radius: 100px;
+  background: white;
+  border: 1px solid transparent;
+  transition: width 0.2s, height 0.2s, background 0.2s;
 }
 
 @keyframes l6 {

src/lib/components/logic/Filters/LibraryFilter.tsx

@@ -37,7 +37,7 @@ const SelectMenu = ({ title }: any) => {
           <ListboxOption
             key={person.id}
             value={person}
-            className="group flex cursor-default items-center gap-2 rounded-lg py-1.5 px-3 select-none data-[focus]:bg-white/10 text-sm/tight"
+            className="group flex items-center gap-2 rounded-lg py-1.5 px-3 select-none data-[focus]:bg-white/10 text-sm/tight"
           >
             <div className="invisible size-4 fill-white group-data-[selected]:visible h-6 w-6 p-1 flex justify-center items-center">
               <HeroIcon iconName="CheckIcon" />

src/lib/components/logic/Sliders/CollectionSlider.tsx

@@ -0,0 +1,82 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import SliderControls from "./SliderControls";
+import generateRandomString from "../../../utils/uidGenerator";
+import { useEffect, useRef } from "react";
+import CollectionCard from "../../ui/Cards/CollectionCard";
+
+const CollectionSlider = ({ title, shadowTitle = "", data = [] }: any) => {
+  const sliderUid = generateRandomString();
+  const shadowTextRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const adjustFontSize = () => {
+      const container: HTMLDivElement | null =
+        document.querySelector(".container");
+      const shadowText = shadowTextRef.current;
+
+      if (container && shadowText) {
+        const containerWidth = container.offsetWidth;
+        shadowText.style.fontSize = `${containerWidth * 0.1}px`;
+      }
+    };
+
+    window.addEventListener("resize", adjustFontSize);
+    adjustFontSize();
+
+    return () => {
+      window.removeEventListener("resize", adjustFontSize);
+    };
+  }, []);
+
+  return (
+    <section className="w-full z-0 relative">
+      {shadowTitle !== "" && (
+        <div
+          className="shadow-text font-extrabold left-0 right-0 mx-auto"
+          ref={shadowTextRef}
+        >
+          {shadowTitle}
+        </div>
+      )}
+      <div className="flex justify-between px-6">
+        <div className="text-white/60 font-bold text-4xl/normal">{title}</div>
+        <SliderControls sliderUid={sliderUid} />
+      </div>
+      <Swiper
+        className="!px-2 !py-2 w-full"
+        breakpoints={{
+          320: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          580: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+          },
+          920: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+          },
+          1080: {
+            slidesPerView: 4,
+            spaceBetween: 20,
+          },
+        }}
+        modules={[Navigation]}
+        navigation={{
+          nextEl: `.customSwiperNext${sliderUid}`,
+          prevEl: `.customSwiperPrevious${sliderUid}`,
+        }}
+      >
+        {data.map((item: any, index: number) => (
+          <SwiperSlide key={index}>
+            <CollectionCard item={item} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </section>
+  );
+};
+
+export default CollectionSlider;

src/lib/components/logic/Sliders/ContentSlider.tsx

@@ -3,22 +3,44 @@ import { Navigation } from "swiper/modules";
 import ContentCard from "../../ui/Cards/ContentCard";
 import SliderControls from "./SliderControls";
 import generateRandomString from "../../../utils/uidGenerator";
+import { useEffect, useRef } from "react";
 
-const ContentSlider = ({ title, gradiant, type, data = [] }: any) => {
+const ContentSlider = ({ title, shadowTitle = "", type, data = [] }: any) => {
   const sliderUid = generateRandomString();
+  const shadowTextRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const adjustFontSize = () => {
+      const container: HTMLDivElement | null =
+        document.querySelector(".container");
+      const shadowText = shadowTextRef.current;
+
+      if (container && shadowText) {
+        const containerWidth = container.offsetWidth;
+        shadowText.style.fontSize = `${containerWidth * 0.1}px`;
+      }
+    };
+
+    window.addEventListener("resize", adjustFontSize);
+    adjustFontSize();
+
+    return () => {
+      window.removeEventListener("resize", adjustFontSize);
+    };
+  }, []);
 
   return (
-    <section className="w-full space-y-2 z-0">
-      <div className="flex justify-between px-6">
+    <section className="w-full space-y-2 z-0 relative">
+      {shadowTitle !== "" && (
         <div
-          className={`text-2xl/normal font-semibold ${
-            gradiant
-              ? "bg-gradient-to-r from-blue-400 via-indigo-400 to-white text-transparent bg-clip-text animate-gradient"
-              : "text-white"
-          }`}
+          className="shadow-text font-extrabold left-0 right-0 mx-auto"
+          ref={shadowTextRef}
         >
-          {title}
+          {shadowTitle}
         </div>
+      )}
+      <div className="flex justify-between px-6">
+        <div className="text-white/60 font-bold text-4xl/normal">{title}</div>
         <SliderControls sliderUid={sliderUid} />
       </div>
       <Swiper

src/lib/components/logic/Sliders/MainSlider.tsx

@@ -1,19 +1,22 @@
-import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
-import { EffectFade, Navigation } from "swiper/modules";
+import { useEffect, useRef } from "react";
+import axios from "axios";
+import { motion } from "framer-motion";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { EffectFade, Navigation, Autoplay, Pagination } from "swiper/modules";
 import "swiper/css/effect-fade";
 import "swiper/css";
 import "swiper/css/navigation";
-import generateRandomString from "../../../utils/uidGenerator";
-import { APP_API_PATHS } from "../../../../config/config";
-import LazyImage from "../LazyImage";
-import HeroIcon from "../../ui/HeroIcon";
+
+import useAppStore from "../../../stores/app.store";
+import Button from "../../actions/Button";
 import IconButton from "../../actions/IconButton";
+import LazyImage from "../LazyImage";
 import useImageColors from "../../../hooks/useImageColors";
-import { useEffect, useRef, useState } from "react";
-import axios from "axios";
-import useAppStore from "../../../stores/app.store";
+import generateRandomString from "../../../utils/uidGenerator";
+import { APP_API_PATHS } from "../../../../config/config";
 
-const SlideContent = ({ item, index, sliderId }: any) => {
+const SlideContent = ({ item, index }: any) => {
   const colors = useImageColors(`${APP_API_PATHS.image}${item.backdrop_path}`);
 
   useEffect(() => {
@@ -51,19 +54,27 @@ const SlideContent = ({ item, index, sliderId }: any) => {
             src={`${APP_API_PATHS.image}${item.poster_path}`}
             alt={`Slide ${index + 1}`}
           />
-          <div className="flex space-x-2 items-center">
-            <button className="h-16 w-16 p-5 bg-white/5 hover:bg-white/10 backdrop-blur-xl rounded-full">
-              <div className="ml-0.5">
-                <HeroIcon iconName="PlayIcon"></HeroIcon>
-              </div>
-            </button>
+          <div className="space-y-4">
             <div>
-              <div className="text-2xl font-semibold">
+              <div className="text-4xl font-bold">
                 {item.title || item.name}
               </div>
-              <div className="text-xs text-white/60">
-                {item.tagline}
-              </div>
+              <div className="text-sm text-white/60">"{item.tagline}"</div>
+            </div>
+            <div className="flex space-x-2">
+              <Button size="large" icon="PlayIcon">
+                Play Now
+              </Button>
+              <IconButton
+                variant="secondary"
+                size="large"
+                icon="BookmarkIcon"
+              />
+              <IconButton
+                variant="secondary"
+                size="large"
+                icon="EllipsisHorizontalIcon"
+              />
             </div>
           </div>
         </div>
@@ -80,11 +91,12 @@ const MainSlider = ({ data }: any) => {
     <div className="px-[4.5rem] w-full h-fit relative">
       <div className="w-full h-fit">
         <Swiper
-          className="aspect-video lg:aspect-[21/9]"
+          className="aspect-video xl:aspect-[21/9]"
           spaceBetween={50}
           slidesPerView={1}
-          modules={[EffectFade, Navigation]}
+          modules={[EffectFade, Navigation, Autoplay, Pagination]}
           effect={"fade"}
+          pagination={{ clickable: true }}
           fadeEffect={{
             crossFade: true,
           }}
@@ -95,6 +107,9 @@ const MainSlider = ({ data }: any) => {
           onSlideChange={(swiper) => {
             useAppStore.setState({ homeSliderIndex: swiper.realIndex });
           }}
+          autoplay={{
+            delay: 5000,
+          }}
         >
           {data.map((item: any, index: number) => (
             <SwiperSlide className="relative" key={index}>
@@ -105,19 +120,45 @@ const MainSlider = ({ data }: any) => {
             className="absolute bottom-0 right-0 z-50 p-6"
             slot="container-end"
           >
-            <div className="flex space-x-2">
-              <IconButton
-                rounded
-                variant="secondary"
-                icon="ChevronLeftIcon"
-                onClick={() => swiperRef.current.slideNext()}
-              ></IconButton>
-              <IconButton
-                rounded
-                variant="secondary"
-                icon="ChevronRightIcon"
-                onClick={() => swiperRef.current.slidePrev()}
-              ></IconButton>
+            <div className="flex space-x-4 items-center">
+              <div className="flex items-center space-x-1">
+                {/* {data.map((item: any, index: any) => (
+                  <motion.div
+                    variants={{
+                      active: {
+                        width: "12px",
+                        height: "12px",
+                        backgroundColor: "rgba(255, 255, 255, 1)",
+                      },
+                      inactive: {
+                        width: "8px",
+                        height: "8px",
+                        backgroundColor: "rgba(255, 255, 255, 0.2)",
+                      },
+                    }}
+                    animate={
+                      index === swiperRef.current?.realIndex
+                        ? "active"
+                        : "inactive"
+                    }
+                    className="rounded-full"
+                  ></motion.div>
+                ))} */}
+              </div>
+              <div className="flex space-x-2 items-center">
+                <IconButton
+                  rounded
+                  variant="secondary"
+                  icon="ChevronLeftIcon"
+                  onClick={() => swiperRef.current.slidePrev()}
+                ></IconButton>
+                <IconButton
+                  rounded
+                  variant="secondary"
+                  icon="ChevronRightIcon"
+                  onClick={() => swiperRef.current.slideNext()}
+                ></IconButton>
+              </div>
             </div>
           </div>
         </Swiper>

src/lib/components/ui/Cards/CollectionCard.tsx

@@ -1,12 +1,18 @@
-import LazyImage from "../../logic/LazyImage";
-
 const CollectionCard = ({ item }: any) => {
   return (
-    <div className="w-full space-y-2 group hover:cursor-pointer gradient-border relative aspect-video rounded-2xl overflow-hidden">
-      <img className="h-full w-full rounded-b-2xl" src={item.backdrop} alt="" />
-      <div className="absolute bottom-0 left-0 right-0 h-20 py-6 w-full overflow-hidden flex justify-center items-center bg-black/60 backdrop-blur-lg">
-        <LazyImage
-          className="object-contain group-hover:scale-110 transition-transform w-2/3 h-full brightness-0 invert"
+    <div className="w-full group relative flex justify-center items-center mt-4">
+      <div className="w-[90%] h-full absolute -top-2 group-hover:-top-4 aspect-video overflow-hidden bg-white/20 -z-10 rounded-2xl backdrop-blur-2xl transition-all"></div>
+      <div className="w-[95%] h-full absolute -top-1 group-hover:-top-2 aspect-video overflow-hidden bg-white/40 -z-10 rounded-2xl backdrop-blur-2xl transition-all"></div>
+      <div className="aspect-video rounded-2xl overflow-hidden">
+        <img
+          className="w-full h-full object-cover"
+          src={item.backdrop}
+          alt=""
+        />
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 flex h-full w-full items-center justify-center bg-white/10 backdrop-blur-2xl rounded-2xl">
+        <img
+          className="group-hover:scale-110 transition-transform brightness-0 w-2/3 invert h-1/3 object-contain"
           src={item.logo}
           alt=""
         />