Merge branch 'dev' of https://github.com/POSUA-NITS/Posua-2024 into M…

…ilans_Task
POSUA-NITS · Mar 28, 2024 · 16c457f · 16c457f
2 parents b886f65 + bd38ce3
commit 16c457f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/Components/Artist/ArtistBigCard.jsx b/src/Components/Artist/ArtistBigCard.jsx
@@ -1,13 +1,13 @@
 import React from "react";
 
-const ArtistBigCard = ({ photoLink, name, desc }) => {
+const ArtistBigCard = ({ photoLink, name, desc, profession = "Singer" }) => {
   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";
 
   return (
     <div>
       <div
-        className="w-[90vw] h-[12rem] gap-[1rem] flex items-center px-2 border-[.4rem]"
+        className="w-[90vw] py-4 gap-[1rem] flex items-center px-2 border-[.4rem]"
         style={{ backgroundColor: "#F1E4D0", borderColor: "#C7A158" }}
       >
         <div className="w-[6.5rem] h-[75%] flex items-center justify-center relative">
@@ -21,16 +21,24 @@ const ArtistBigCard = ({ photoLink, name, desc }) => {
             alt="Artist img"
             className="absolute h-full w-full object-cover"
           />
+          <div className="absolute flex flex-col justify-center items-center bottom-[.8rem] z-[20000] leading-[.6rem]">
+            <div className="text-[.7rem] font-semibold" style={{ color: "#B02227" }}>
+              {name}
+            </div>
+            <div className="text-[.4rem]" style={{ color: "#B02227" }}>
+              {profession}
+            </div>
+          </div>
         </div>
-        <div className="flex-[3] h-[100%] flex flex-col justify-center gap-[.6rem] py-2 items-center ">
+        <div className="flex-[3] h-[100%] flex flex-col justify-center gap-[.6rem] py-2 items-center px-3">
           <div
             className=" font-semibold text-[1.2rem]"
             style={{ color: "#B02227", fontFamily: "Abril Fatface" }}
           >
             {name}
           </div>
           <div
-            className="text-[.45rem] text-center"
+            className="text-[.5rem] text-center"
             style={{ color: "#5F1516", fontFamily: "Alata" }}
           >
             {desc}

diff --git a/src/Components/Artist/ArtistPageAnimation.jsx b/src/Components/Artist/ArtistPageAnimation.jsx
@@ -45,13 +45,13 @@ const ArtistPageAnimation = ({ first, second, third, setfirst, setsecond, setthi
     "https://res.cloudinary.com/dp92qug2f/image/upload/v1711635199/Runway-2024-03-28T14_07_15.809Z-Upscale-Image-Upscaled-Image-2396-x-1920-min_gvp6bp.webp";
   return (
     <div
-      className={`relative w-[100%] transition-all duration-[1000ms] ease-in-out ${first || second || third ? "h-[50rem]" : " h-[25rem]"}`}
+      className={`relative w-[100%] transition-all duration-[1000ms] ease-in-out ${first || second || third ? "h-[55rem]" : " h-[25rem]"}`}
     >
       <div
-        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`}
+        className={`flex w-[100%] justify-center gap-[8rem] transition-all duration-[1500] ease-in-out ${first || second || third ? "top-[37rem]" : "top-[0rem]"} absolute`}
       >
         <div
-          className={`transition-all duration-[1500ms] ease-in-out ${first ? "absolute top-[-30rem]" : "top-[0rem]"}`}
+          className={`transition-all duration-[1500ms] ease-in-out ${first ? "absolute top-[-37rem]" : "top-[0rem]"}`}
           onClick={() => {
             setsecond(false);
             setthird(false);
@@ -72,7 +72,7 @@ const ArtistPageAnimation = ({ first, second, third, setfirst, setsecond, setthi
           />
         </div>
         <div
-          className={`transition-all duration-[1500ms] ease-in-out ${second ? "absolute top-[-30rem]" : "top-[0rem]"}`}
+          className={`transition-all duration-[1500ms] ease-in-out ${second ? "absolute top-[-37rem]" : "top-[0rem]"}`}
           onClick={() => {
             setfirst(false);
             setthird(false);

diff --git a/src/Pages/Artist/ArtistPage.jsx b/src/Pages/Artist/ArtistPage.jsx
@@ -29,6 +29,7 @@ const ArtistPage = () => {
   const UpArtistData = [
     {
       id: 1,
+      profession: "Singer",
       name: "Nilotpal Bora",
       desc11: `ঐ গধূলি গধূলি
       ফুৰো ৰহিমলা
@@ -58,6 +59,9 @@ const ArtistPage = () => {
     },
     {
       id: 2,
+      profession: "Band",
+      // photoLink:
+      //   "https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1710876326/sf7py4kekiyxmzcndxqp.jpg?_s=public-apps",
       name: "Xomonnoy Gushti",
       photoLink:
         "https://res.cloudinary.com/dp92qug2f/image/upload/v1711635199/Runway-2024-03-28T14_07_15.809Z-Upscale-Image-Upscaled-Image-2396-x-1920-min_gvp6bp.webp",
@@ -171,6 +175,7 @@ const ArtistPage = () => {
                     <ArtistBigCard
                       photoLink={profile.photoLink}
                       name={profile.name}
+                      profession={profile.profession}
                       desc={profile.desc}
                     />
                   </div>