Home Page Done ( Yes, Last Part Has Problems But Believe me We Had No Other Option! )

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

@@ -0,0 +1,116 @@
+import React from "react";
+import Button from "../../../../components/Button";
+import VodProduct from "../../../../components/VodProduct";
+import { Link } from "react-router-dom";
+import posterImage from '../../../../assets/images/poster.svg'
+const Part4 = () => {
+    const videosData = [
+        {
+          id: 0,
+          name: "ریاضی",
+          price: "145.000",
+          grade: " پایه چهارم ",
+          imageUrl: "https://dnvn.ir/api/v1/file/2105",
+          poster: posterImage,
+        },
+        {
+          id: 2,
+          name: "علوم تجربی",
+          price: "145.000 ",
+          grade: "پایه سوم",
+          imageUrl: "https://dnvn.ir/api/v1/file/2105",
+          poster: posterImage,
+        },
+        {
+          id: 1,
+          name: "زمین شناسی",
+          price: "145.000 ",
+          grade: "پایه چهارم",
+          imageUrl: "https://dnvn.ir/api/v1/file/2105",
+          poster: posterImage,
+        },
+        {
+          id: 3,
+          name: "ریاضی",
+          price: "145.000 ",
+          grade: "پایه چهارم",
+          imageUrl: "https://dnvn.ir/api/v1/file/2105",
+          poster: posterImage,
+        },
+        {
+          id: 5,
+          name: "ریاضی",
+          price: "145.000 ",
+          grade: "پایه چهارم",
+          imageUrl: "https://dnvn.ir/api/v1/file/2105",
+          poster: posterImage,
+        },
+        {
+            id: 4,
+            name: "ریاضی",
+            price: "145.000 ",
+            grade: "پایه چهارم",
+            imageUrl: "https://dnvn.ir/api/v1/file/2105",
+            poster: posterImage,
+          }
+      ];
+     
+    return <div className="w-full my-6" >
+          <div className="w-full flex justify-between items-center">
+              <div className="flex items-center text-4xl font-black text-blue52">
+              <div className="w-6 h-6 bg-blue-300 ml-4 rounded-full"></div>
+                  <h1>
+                  جدیدترین دوره های ویدیویی
+                  </h1>
+              </div>
+              <div>
+                  <Link to='/products'>
+                      <Button
+                          title="مشاهده لیست محصولات"
+                          backgroundColor="bg-blue-100"
+                          border={{
+                              color: "#196EC055",
+                              width: "0px",
+                            }}
+                          width="100%"
+                          selectable={true}
+                          
+                          color= "text-blueC0"
+                          onClick={() => null}
+                          radius={false}
+                          twPaddings="py-4 px-12"
+                      />
+                  </Link>
+              </div>
+          </div>
+          <ul className="py-6 my-10 border-t border-b border-solid border-gray-200 justify-center" style={{}}>
+              
+
+          <ul className="flex flex-wrap justify-center ">
+          {
+            videosData.slice(0,6).map((video, index) => (
+                <li className={`flex flex-col border-solid border-gray-200 ${index != 3 && index != 4 && index != 5 ? 'border-b' : null} video ${index != 0 && index != 3 ?'border-r' : null}`}
+                style={{width: '33.333333%',}}>
+              <Link
+              to={"/videos/" + video.id}
+              
+            >
+              <VodProduct 
+              productTitle={`دوره ی ویدیویی ${video.name}`}
+              productCat={video.grade}
+              price={video.price}
+              priceTitle={false}
+              discountPrice={false}
+              />
+              </Link>
+              </li>
+            ))
+          }
+          </ul>
+         
+          
+          </ul>
+      </div>
+}
+
+export default Part4;

src/views/Home/Desktop/index.js

@@ -9,6 +9,7 @@ import SalesContainer from "../../../components/SalesContainer";
 import { book, publicApi } from "../../../redux/actions";
 import Part2 from "./Part2";
 import HomeImg from '../../../assets/images/HomeImg.svg';
+import Part4 from "./Part4";
 
 const DesktopHome = (
 {
@@ -28,6 +29,7 @@ return (
         <div>
           <img src={HomeImg} />
         </div>
+        <Part4 />
     </div>    
 
 )