VodProduct Fixed (Not Completely)

src/components/VodProduct/index.js

@@ -50,6 +50,7 @@ const VodProduct = ({
   productTitle,
   poster,
   price,
+  minHeight
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
   // const [openModal, setOpenModal] = useState(false);
@@ -66,7 +67,7 @@ const VodProduct = ({
       <div className="flex flex-wrap sm:flex-nowrap justify-around">
         <div className="w-full flex flex-wrap items-center justify-around my-10 px-1 sm:px-4">
           <div
-            className={`w-full mx-1 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
+            className={`w-full mx-1 sm:w-60 md:w-96  rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
           >
             {/* product image */}
             <div
@@ -75,7 +76,7 @@ const VodProduct = ({
                 backgroundImage: `url(${videoImages[Number(index)]})`,
                 backgroundSize: "100% 100%",
                 backgroundRepeat: "no-repeat",
-                minHeight: "calc(100vh / 3.5)",
+                minHeight: minHeight,
               }}
               data-modal-toggle="large-modal"
             >

src/views/Home/Desktop/Part4/index.js

@@ -103,6 +103,7 @@ const Part4 = () => {
                 discountPrice={false}
                 key={index}
                 index={index}
+                minHeight={"calc(100vh / 3.5)"}
               />
               </Link>
               </li>

src/views/Products/layouts/Main.js

@@ -105,6 +105,7 @@ export const Main = ({ isMobile,
               <Link
               to={"/videos/" + video.id}
               className="flex flex-col rounded-md ml-4 "
+             
             >
               <VodProduct 
               productTitle={`دوره ی ویدیویی ${video.name}`}
@@ -112,10 +113,14 @@ export const Main = ({ isMobile,
               price={video.price}
               priceTitle={false}
               discountPrice={false}
+              key={index}
+              index={index}
+              minHeight={"250px"}
               />
               </Link>
             ))
           }
+          
         </ScrollContainer>
      
       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
@@ -136,6 +141,7 @@ export const Main = ({ isMobile,
                 productCatTextColor='text-blueC0'
                 productHolderBorder=''
                 productHolderHoverBorder='shadow-md'
+                starRate={Math.floor(Math.random() * 5) + 1}
             />
           ))
           : books?.map((product, index) => (
@@ -154,6 +160,7 @@ export const Main = ({ isMobile,
                 productCatTextColor='text-blueC0'
                 productHolderBorder=''
                 productHolderHoverBorder='shadow-md'
+                starRate={Math.floor(Math.random() * 5) + 2}
               />
             </Link>
           ))}