update src/components/ButtonDesign/Button/index.js, src/components/SingleProduct/ProductDesign1/index.js and src/components/SingleProduct/VodDesign1/index.js

src/components/ButtonDesign/Button/index.js

@@ -10,7 +10,7 @@ const Button = ({
   return (
     <button
       onClick={onClick}
-      className={`flex items-center justify-center transiton ease-linear duration-200 hover:bg-opacity-70 ${className}`}
+      className={`flex items-center justify-center transiton ease-linear duration-200 ${className}`}
     >
       {text}
       {icon && (
@@ -25,7 +25,7 @@ const Button = ({
 export default Button;
 Button.defaultProps = {
   className:
-    "bg-red-400 text-white hover:bg-gray-900 border border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4",
+    "bg-red-400 text-white hover:bg-gray-900 border border-b-4 border-lightBlueBorderColor rounded text-sm px-4 py-4 hover:bg-opacity-90",
   text: "اطلاعات بیشتر",
 
   iconHolderClassName: "bg-darkGreenBg mr-2",

src/components/SingleProduct/ProductDesign1/index.js

@@ -10,6 +10,7 @@ import AnimatedProgressbar1 from "../../ProgressBar/AnimatedProgressbar1";
 const Design1 = ({
   productHolderClassname,
 
+  relativeIcons,
   discountPricePercent,
   likeBtn,
   discount,
@@ -49,7 +50,7 @@ const Design1 = ({
       {/* product image */}
       <div className="w-full relative">
         {/* icons on image */}
-        <div className="flex flex-col gap-y-2 absolute left-2 top-2">
+        <div className={`${relativeIcons}`}>
           {discountPricePercent && (
             <ButtonDivTag
               icon={false}
@@ -214,6 +215,7 @@ Design1.defaultProps = {
   productHolderClassname: "rounded-lg shadow-sm p-2 border border-[#C3C3C3]",
 
   // three buttons on top left side of the holder
+  relativeIcons: "flex flex-col items-center gap-y-2 absolute left-2 top-2",
   discountPricePercent: "23",
   likeBtn: true,
   discount: true,

src/components/SingleProduct/VodDesign1/index.js

@@ -8,12 +8,16 @@ import Tooptip1 from "../../Tooltip/Tooltip1";
 import AnimatedProgressbar1 from "../../ProgressBar/AnimatedProgressbar1";
 
 const VodDesign1 = ({
-  productHolderClassname,
+  cardClassName,
 
+  relativeIcons,
   discountPricePercent,
   likeBtn,
   discount,
 
+  playButtonClass,
+  playImage,
+
   tooltip,
 
   productTitle,
@@ -27,6 +31,9 @@ const VodDesign1 = ({
   star,
 
   discountPrice,
+  priceHolder,
+  priceTitle,
+
   price,
 
   progressBar,
@@ -35,9 +42,7 @@ const VodDesign1 = ({
 
   priceDirection,
   productTitleAlignment,
-  priceHolder,
   rangeHolder,
-  priceTitle,
   addToCartHolder,
   productTitleCategoryHolder,
   productTitleCategoryHolderAlignment,
@@ -46,10 +51,11 @@ const VodDesign1 = ({
 }) => {
   return (
     <>
-      <div className={`${productHolderClassname}`}>
-        {/* product image */}
+      <div className={`${cardClassName}`}>
+        {/* TOP SECTION === ProductImage && ICONS on image && PlayButton && Tooltip */}
+        {/* ProductImage */}
         <div
-          className="group transition ease-in-out delay-150 duration-300 w-full relative flex items-center justify-center cursor-pointer"
+          className="w-full group relative flex items-center justify-center transition ease-in-out duration-300 cursor-pointer"
           style={{
             backgroundImage: `url("images/VodDesign1watermelon.png")`,
             backgroundSize: "100% 100%",
@@ -59,12 +65,12 @@ const VodDesign1 = ({
           data-modal-toggle="large-modal"
         >
           {/* icons on image */}
-          <div className="flex flex-col gap-y-2 absolute left-2 top-2">
+          <div className={`${relativeIcons}`}>
             {discountPricePercent && (
               <ButtonDivTag
                 icon={false}
                 text={discountPricePercent + "%"}
-                className="p-2 bg-[#4ACA5322] text-xs text-[#4ACA53] font-sansbold rounded-md"
+                className="p-2 bg-[#44d04eee] text-xs text-white font-sansbold rounded-md"
               />
             )}
             {likeBtn && (
@@ -82,17 +88,17 @@ const VodDesign1 = ({
                 text={false}
                 icon={"images/SingleProductdiscount.png"}
                 iconHolderClassName={""}
-                iconClassName={"w-10"}
+                iconClassName={"w-9"}
               />
             )}
           </div>
           {/* play button */}
           <div
-            className="rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 bg-[#0D0D0D99]"
+            className={`rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 ${playButtonClass}`}
             // onClick={() => setOpenModal(true)}
           >
             <img
-              src="images/VodDesign1white-play-button-icon.svg"
+              src={playImage}
               alt=""
               className="w-5"
               // onClick={() => setOpenModal(true)}
@@ -100,11 +106,12 @@ const VodDesign1 = ({
           </div>
           {/* select Color */}
           {tooltip && (
-            <div className="flex items-center gap-x-1 absolute right-2 bottom-2">
+            <div className="flex items-center gap-x-1 absolute right-2 bottom-2 bg-black">
               <Tooptip1 />
             </div>
           )}
         </div>
+        {/* MiddleSection */}
         {/* product content */}
         <div className="px-2">
           {/* content */}
@@ -128,7 +135,7 @@ const VodDesign1 = ({
           </div>
           {/* price */}
           <div
-            className={`flex ${priceStarHolder} ${priceStarAlignment}  justify-between mt-2`}
+            className={`flex ${priceStarHolder} ${priceStarAlignment} justify-between mt-2`}
           >
             {priceHolder && (
               <div
@@ -160,13 +167,12 @@ const VodDesign1 = ({
                 </div>
                 {/* add to cart */}
                 {addToCartHolder && (
-                  <button
-                    className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500  ${
+                  <Button
+                    text={"اضافه کردن به سبد خرید"}
+                    className={`rounded-md px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 {
                       priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                     }`}
-                  >
-                    اضافه کردن به سبد خرید
-                  </button>
+                  />
                 )}
               </div>
             )}
@@ -240,30 +246,33 @@ const VodDesign1 = ({
 export default VodDesign1;
 
 VodDesign1.defaultProps = {
-  productHolderClassname:
-    "min-w-[600px] rounded-lg shadow-sm p-20 border border-[#C3C3C3]",
+  cardClassName: "w-[444px] rounded-lg shadow-sm p-2 border border-[#C3C3C3]",
 
+  relativeIcons: "flex flex-col items-center gap-y-2 absolute left-2 top-2",
   discountPricePercent: "23",
   likeBtn: true,
   discount: true,
 
+  playButtonClass: "bg-[#0D0D0D99]",
+  playImage: "images/VodDesign1white-play-button-icon.svg",
+
   productTitle: "نسخه چاپی علموم تجربه هفتم",
   productTitleClass: "text-sm text-justify text-[#246E8A]",
 
-  // icons on product image
-  productColor: true,
+  productContent: `این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب دیگری نیز دارد.`,
+  productContentClass: "mt-2 text-[#707070] text-justify text-xs leading-6",
+
+  productCat: true,
+  star: true,
+
   // product price
   discountPrice: true,
   priceHolder: true,
-  priceTitle: false,
+  priceTitle: true,
 
-  productContent: false,
-  star: true,
-  productTags: false,
-  productCat: true,
-  rangeHolder: true,
+  productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
 
-  addToCartHolder: false,
+  addToCartHolder: true,
 
   productTitleAlignment: "text-justify",
 
@@ -274,6 +283,6 @@ VodDesign1.defaultProps = {
   productTitleCategoryHolder: "flex-row",
   productTitleCategoryHolderAlignment: "items-center",
 
-  priceStarHolder: "flex-row",
-  priceStarAlignment: "items-center",
+  priceStarHolder: "flex-col",
+  priceStarAlignment: "justify-between",
 };