Merge pull request #25 from POSUA-NITS/satya2

UPD: artists and loader

src/Components/Artist/ArtistCard.jsx

@@ -1,14 +1,21 @@
 import React from "react";
 
-const ArtistCard = ({ clickk, setClickk, setCross, name }) => {
+const ArtistCard = ({
+  clickk,
+  setClickk,
+  setCross,
+  photoLink = "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
+  name,
+  profession = "Singer",
+}) => {
   //  const [clickk, setClickk] = useState(false);
   // console.log(clickk);
   const backFrame =
     "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711056518/Frame_2608596_hzjumh.jpg?_s=public-apps";
   const frame =
     "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711056519/Group_2608667_reshtk.jpg?_s=public-apps";
-  const photoLink =
-    "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps";
+  // const photoLink =
+  //   "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps";
   return (
     <div
       className={`flex items-center transition-all duration-[1000ms] ease-in-out ${clickk ? "w-[95vw] md:w-[60rem] h-[25rem] border-[.5rem] shadow-md justify-between" : "w-[12.8rem] h-[16rem] justify-center"}`}
@@ -30,16 +37,16 @@ const ArtistCard = ({ clickk, setClickk, setCross, name }) => {
           <img src={photoLink} alt="" className="w-full h-full object-cover" />
         </div>
         <div
-          className={`absolute w-[100%] h-[100%] flex flex-col justify-center items-center  z-[20]  ${clickk ? "top-[6.7rem] leading-[1.3rem]" : "top-[4.9rem] leading-[1rem]"}`}
+          className={`absolute w-[100%] h-[100%] flex flex-col justify-center items-center  z-[20]  ${clickk ? "top-[6.7rem] leading-[1.3rem]" : "top-[4.9rem] leading-[1.1rem]"}`}
         >
           <div
             className={`font-semibold ${clickk ? "text-[1.3rem]" : "text-[1rem]"}`}
             style={{ color: "#B02227" }}
           >
             {name}
           </div>
-          <div className="text-[.8rem]" style={{ color: "#B02227" }}>
-            Singer
+          <div className="text-[.7rem]" style={{ color: "#B02227" }}>
+            {profession}
           </div>
         </div>
       </div>

src/Components/Artist/ArtistPageAnimation.jsx

@@ -16,7 +16,7 @@ const ArtistPageAnimation = ({ first, second, third, setfirst, setsecond, setthi
       className={`relative w-[100%] transition-all duration-[1000ms] ease-in-out ${first || second || third ? "h-[50rem]" : " h-[25rem]"}`}
     >
       <div
-        className={`flex h-[30rem] w-[100%] justify-center gap-[7rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[30rem]" : "top-[0rem]"} absolute`}
+        className={`flex h-[30rem] w-[100%] justify-center gap-[8rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[30rem]" : "top-[0rem]"} absolute`}
       >
         <div
           className={`transition-all duration-[1500ms] ease-in-out ${first ? "absolute top-[-30rem]" : "top-[0rem]"}`}

src/Components/Loader/Loading.jsx

@@ -1,20 +1,22 @@
 import React from "react";
-import { Player } from "@lottiefiles/react-lottie-player";
+// import { Player } from "@lottiefiles/react-lottie-player";
 import styles from "./Loading.module.scss";
 // import loaderlottie from './posua24loaderjson.json'
-import projector from "../../assets/lottie/projector.json";
+// import projector from "../../assets/lottie/projector.json";
+import loader1 from "./loader1.gif";
 
 const Loading = () => {
   return (
     <main id={styles.loadingtopmain}>
-      <Player
+      {/* <Player
         className={styles.butterfly}
         autoplay
         loop
         src={projector}
         id={styles.lottie}
-        // style={{ height: "auto", width: "100px" }}
-      ></Player>
+        style={{ height: "auto", width: "100px" }}
+      ></Player> */}
+      <img src={loader1} alt="Loading..." className="" />
       {/* <p>Loading...</p> */}
     </main>
   );

src/Components/Loader/Loading.module.scss

@@ -13,4 +13,5 @@
   justify-content: center;
   align-items: center;
   overflow-x: hidden;
+  overflow-y: hidden;
 }