update

src/components/Blogs/design4/BlogDesign4.js

@@ -36,17 +36,19 @@ const BlogDesign4 = ({
         <div className="w-2/5 transform translate-x-1/3">
           <img src={blogImage} alt="" className="w-full h-full " />
         </div>
-        <div className="w-3/5 flex flex-col justify-around transform translate-x-10">
+        <div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10">
+          <div>
             <h2 className="text-base text-grayTextColor">
               آیا مواد غذای پر فیبر و مفید هستند؟
             </h2>
             {blogExcerpt && (
-            <p className="text-sm text-justify leading-6 text-grayTextColor">
+              <p className="text-sm text-justify leading-6 text-grayTextColor mt-3">
-              در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
+                در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
-              شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
+                خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
-              دیگران متوجه شوند.
+                کند تا دیگران متوجه شوند.
               </p>
             )}
+          </div>
           <div className=" flex item-center justify-between">
             {blogAuthor && (
               <div className=" flex items-center">

src/components/Blogs/design5/BlogDesign5.js

@@ -36,17 +36,19 @@ const BlogDesign5 = ({
         <div className="w-2/5">
           <img src={blogImage} alt="" className="w-full h-full" />
         </div>
-        <div className="w-3/5 flex flex-col justify-around mr-4">
+        <div className="w-3/5 flex flex-col justify-between py-3 mr-4">
+          <div>
             <h2 className="text-base text-justify text-grayTextColor">
               آیا مواد غذای پر فیبر و مفید هستند؟
             </h2>
             {blogExcerpt && (
-            <p className="text-justify text-sm leading-6 text-grayTextColor">
+              <p className="text-justify text-sm leading-6 text-grayTextColor mt-3 ">
-              در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
+                در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
-              شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
+                خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
-              دیگران متوجه شوند.
+                کند تا دیگران متوجه شوند.
               </p>
             )}
+          </div>
           <div className="flex item-center justify-between w-full">
             {blogAuthor && (
               <div className="flex items-center">

src/components/buttonDesign/ButtonDesign.js

@@ -55,7 +55,7 @@ const ButtonDesign = ({
       <div className="flex flex-wrap justify-around items-center">
         <div>
           <button
-            className={`flex items-center  text-sm md:text-base hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+            className={`flex items-center  text-sm md:text-base transiton duration-200 hover:${buttonBgHoverColor} ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
           >
             اطلاعات بیشتر
             {leftArrowWhite && (

src/components/productDesign/ProductDesign.js

@@ -304,7 +304,7 @@ ProductDesign.defaultProps = {
 
   productCatTextColor: "text-darkCrimsonTextColor",
   // برای درصد دادن به عرض رنج
-  rangeWidth: "60%",
+  rangeWidth: "72%",
   //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
   productHolderBorder: "border",
   productHolderBorderColor: "border-grayBorderColor",

src/components/vodProductDesign/VodProductDesign.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import StarRating from "../starRating/StarRating";
 import ReactTooltip from "react-tooltip";
@@ -47,6 +47,12 @@ const VodProductDesign = ({
   rangeWidth,
   playBtnBgColor,
 }) => {
+  const [progressFlag, setProgressFlag] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      setProgressFlag(true);
+    }, 500);
+  });
   return (
     <section className="w-3/6	 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -237,7 +243,10 @@ const VodProductDesign = ({
               {rangeHolder && (
                 <div className="bg-rangeBgColor h-3 w-full rounded mt-2">
                   <div
-                    className={`bg-rangeFillBgColor h-3 rounded ${rangeWidth}`}
+                    className={`bg-rangeFillBgColor h-3 rounded duration-300`}
+                    style={{
+                      width: progressFlag ? rangeWidth : 0,
+                    }}
                   ></div>
                 </div>
               )}
@@ -294,7 +303,7 @@ VodProductDesign.defaultProps = {
   productTitleAlignment: "text-justify",
 
   // برای درصد دادن به عرض رنج
-  rangeWidth: "w-44",
+  rangeWidth: "75%",
 
   //دی ای وی که محصول داخلش است میتونیم بهش بوردر بدیم
   productHolderBorder: "border",