fix: update HomePage MainSlider ui and remove shadowText from sliders

DesterLib · Aug 3, 2024 · 9a84662 · 9a84662
1 parent 9f81fad
commit 9a84662
Show file tree

Hide file tree

Showing 13 changed files with 296 additions and 395 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.4",
+    "whatamesh": "^0.2.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.css b/src/index.css
@@ -74,53 +74,20 @@
   animation: l6 2s infinite;
 }
 
-.shadow-text {
-  position: absolute;
-  bottom: calc(90% - 50px);
-  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: fit-content;
-}
-
-.shadow-text-color {
-  position: absolute;
-  bottom: calc(90% - 50px);
-  font-size: calc(4vw + 4vh);
-  background: linear-gradient(45deg, #0048ff, #00ff00, #00f2ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  transform: translateY(20%);
-  z-index: 1;
-  white-space: nowrap;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  width: fit-content;
-}
-
 .swiper-pagination {
   position: absolute;
   bottom: 30px;
-  right: 110px;
+  right: 160px;
   z-index: 100;
   width: fit-content;
-  height: 20px;
+  height: 12px;
   display: flex;
   align-items: center;
 }
 
 .swiper-pagination-bullet {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   margin: 2px;
   border-radius: 100px;
   background: rgba(255, 255, 255, 0.2);
@@ -129,8 +96,8 @@
 }
 
 .swiper-pagination-bullet-active {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   border-radius: 100px;
   background: white;
   border: 1px solid transparent;

diff --git a/src/lib/components/logic/Sliders/CollectionSlider.tsx b/src/lib/components/logic/Sliders/CollectionSlider.tsx
@@ -5,7 +5,7 @@ import generateRandomString from "../../../utils/uidGenerator";
 import { useEffect, useRef } from "react";
 import CollectionCard from "../../ui/Cards/CollectionCard";
 
-const CollectionSlider = ({ title, shadowTitle = "", data = [] }: any) => {
+const CollectionSlider = ({ title, data = [] }: any) => {
   const sliderUid = generateRandomString();
   const shadowTextRef = useRef<HTMLDivElement>(null);
 
@@ -30,19 +30,7 @@ const CollectionSlider = ({ title, shadowTitle = "", data = [] }: any) => {
   }, []);
 
   return (
-    <section
-      className={`w-full z-0 relative ${
-        shadowTitle !== "" ? "space-y-4" : "space-y-0"
-      }`}
-    >
-      {shadowTitle !== "" && (
-        <div
-          className="shadow-text font-extrabold left-0 right-0 mx-auto"
-          ref={shadowTextRef}
-        >
-          {shadowTitle}
-        </div>
-      )}
+    <section className="w-full z-0 relative">
       <div className="flex justify-between px-6">
         <div className="text-white/60 font-bold text-4xl/normal">{title}</div>
         <SliderControls sliderUid={sliderUid} />

diff --git a/src/lib/components/logic/Sliders/ContentSlider.tsx b/src/lib/components/logic/Sliders/ContentSlider.tsx
@@ -6,7 +6,7 @@ import { useEffect, useRef } from "react";
 import MovieCard from "../../ui/Cards/MovieCard";
 import TvCard from "../../ui/Cards/TvCard";
 
-const ContentSlider = ({ title, shadowTitle = "", type, data = [] }: any) => {
+const ContentSlider = ({ title, type, data = [] }: any) => {
   const sliderUid = generateRandomString();
   const shadowTextRef = useRef<HTMLDivElement>(null);
 
@@ -31,19 +31,7 @@ const ContentSlider = ({ title, shadowTitle = "", type, data = [] }: any) => {
   }, []);
 
   return (
-    <section
-      className={`w-full z-0 relative ${
-        shadowTitle !== "" ? "space-y-4" : "space-y-0"
-      }`}
-    >
-      {shadowTitle !== "" && (
-        <div
-          className="shadow-text font-extrabold left-0 right-0 mx-auto"
-          ref={shadowTextRef}
-        >
-          {shadowTitle}
-        </div>
-      )}
+    <section className="w-full z-0 relative">
       <div className="flex justify-between px-6">
         <div className="text-white/60 font-bold text-4xl/normal">{title}</div>
         <SliderControls sliderUid={sliderUid} />

diff --git a/src/lib/components/logic/Sliders/GenreSlider.tsx b/src/lib/components/logic/Sliders/GenreSlider.tsx
@@ -57,32 +57,19 @@ const GenreSlider = ({ data = [] }: any) => {
 
   return (
     <section className="w-full z-0 relative space-y-4">
-      <div
-        className="shadow-text-color font-extrabold left-0 right-0 mx-auto"
-        ref={shadowTextRef}
-      >
-        Genres
-      </div>
-      <div className="flex justify-end px-6">
+      <div className="flex justify-between px-6">
+        <div className="text-white/60 font-bold text-4xl/normal">Genres</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,
+            slidesPerView: 4,
             spaceBetween: 20,
           },
           1080: {
-            slidesPerView: 4,
+            slidesPerView: 6,
             spaceBetween: 20,
           },
         }}

diff --git a/src/lib/components/logic/Sliders/MainSlider.tsx b/src/lib/components/logic/Sliders/MainSlider.tsx
@@ -45,7 +45,7 @@ const SlideContent = ({ item, index }: any) => {
             "linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.6), rgba(0,0,0,0.1), rgba(0,0,0,0))",
         }}
       />
-      <div className="absolute bottom-0 left-0 right-0 w-full p-4 flex justify-between items-end">
+      <div className="absolute bottom-0 left-0 right-0 w-full px-[4.5rem] py-4 flex justify-between items-end">
         <div className="flex space-x-6 items-end">
           <LazyImage
             className="w-[160px] rounded-xl overflow-hidden"
@@ -87,7 +87,7 @@ const MainSlider = ({ data }: any) => {
   const swiperRef = useRef<any>();
 
   return (
-    <div className="px-[4.5rem] w-full h-fit relative">
+    <div className="w-full h-fit relative">
       <div className="w-full h-fit">
         <Swiper
           className="aspect-video xl:aspect-[21/9]"
@@ -116,24 +116,22 @@ const MainSlider = ({ data }: any) => {
             </SwiperSlide>
           ))}
           <div
-            className="absolute bottom-0 right-0 z-50 p-6"
+            className="absolute bottom-[20px] right-0 z-50 px-[4.5rem]"
             slot="container-end"
           >
-            <div className="flex space-x-4 items-center">
-              <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 className="flex space-x-2 items-center justify-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>
         </Swiper>

diff --git a/src/lib/components/ui/Cards/GenreCard.tsx b/src/lib/components/ui/Cards/GenreCard.tsx
@@ -1,7 +1,7 @@
 const GenreCard = ({ item }: any) => {
   return (
-    <div className="aspect-video bg-white/20 rounded-2xl flex justify-center items-center backdrop-blur-md px-6 font-bold text-4xl">
-      <div>{item.genre}</div>
+    <div className="w-full h-full bg-white/20 transition-transform hover:scale-110 aspect-video rounded-2xl overflow-hidden flex justify-center items-center backdrop-blur-md">
+      <div className="text-2xl font-bold">{item.genre}</div>
     </div>
   );
 };

diff --git a/src/lib/components/ui/Cards/WatchingCard.tsx b/src/lib/components/ui/Cards/WatchingCard.tsx
@@ -24,8 +24,8 @@ const WatchingCard = ({ item }: any) => {
   return (
     <div className="rounded-2xl aspect-video overflow-hidden relative bg-zinc-700 z-10 group">
       <LazyImage src={`${APP_API_PATHS.image}${item.backdrop_path}`} alt="" />
-      <div className="absolute h-full flex flex-col justify-between bottom-0 left-0 w-full p-4 bg-black/40 img-bg-blur-hide group-hover:img-bg-blur-show">
-        <div className="text-lg/none font-semibold text-white">
+      <div className="absolute h-full flex flex-col justify-between bottom-0 left-0 w-full p-2.5 bg-black/40 img-bg-blur-hide group-hover:img-bg-blur-show">
+        <div className="text-sm/none font-semibold text-white">
           {item.title}
         </div>
         <div className="w-full space-y-2">

diff --git a/src/lib/pages/BrowsePage.tsx b/src/lib/pages/BrowsePage.tsx
@@ -1,57 +1,16 @@
 import { useLoaderData } from "react-router-dom";
-import CollectionSlider from "../components/logic/Sliders/CollectionSlider";
 import TransitionWrapper from "./TransitionWrapper";
-import { motion } from "framer-motion";
-import { APP_API_PATHS } from "../../config/config";
 import GradiantBgWrapper from "../components/ui/GradiantBgWrapper";
-import GenreSlider from "../components/logic/Sliders/GenreSlider";
 
 const BrowsePage = () => {
   const home: any = useLoaderData();
   return (
     <GradiantBgWrapper
       colors={home.main_slider[2].colors}
-      className="w-full h-screen overflow-y-auto overscroll-none"
+      className="w-full h-screen overflow-y-auto overscroll-none px-[4.5rem]"
     >
-      <div className="p-[4.5rem] space-y-12">
-        <div className="p-2 aspect-[30/10] flex space-x-4">
-          <motion.div className="w-full h-full rounded-2xl overflow-hidden">
-            <img
-              className="w-full h-full object-cover"
-              src={`${APP_API_PATHS.image}${home.main_slider[2].backdrop_path}`}
-              alt=""
-            />
-          </motion.div>
-          <div className="w-1/3 h-full grid grid-rows-2 gap-4">
-            <div className="h-full">
-              <div className="aspect-video rounded-2xl overflow-hidden h-full">
-                <img
-                  className="w-full h-full object-cover"
-                  src={`${APP_API_PATHS.image}${home.main_slider[0].backdrop_path}`}
-                  alt=""
-                />
-              </div>
-            </div>
-            <div className="h-full">
-              <div className="aspect-video rounded-2xl overflow-hidden h-full">
-                <img
-                  className="w-full h-full object-cover"
-                  src={`${APP_API_PATHS.image}${home.main_slider[1].backdrop_path}`}
-                  alt=""
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="w-full my-auto h-[1px] bg-gradient-to-l from-transparent via-white/10 to-transparent mr-2"></div>
-        <GenreSlider data={home.collections} />
-        <div className="w-full my-auto h-[1px] bg-gradient-to-l from-transparent via-white/10 to-transparent mr-2"></div>
-        <CollectionSlider
-          shadowTitle="Collections"
-          type="movie"
-          data={home.collections}
-        />
-        <div className="w-full my-auto h-[1px] bg-gradient-to-l from-transparent via-white/10 to-transparent mr-2"></div>
+      <div className="h-screen w-[300px] py-[4.5rem]">
+        <div className="h-full w-full bg-white/20 rounded-2xl"></div>
       </div>
     </GradiantBgWrapper>
   );