Added CardArticle comp

src/components/UI/CardArticle/CardArticle.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import cardCalendar from "../../../images/cardCalendar.svg";
+
+import "./cardArticle.scss";
+
+export const CardArticle = ({ images, title, data, id }) => {
+  return (
+    <div className="card-article">
+      <img src={images} />
+      <h5>{title}</h5>
+      <div className="card-article__data">
+        <img src={cardCalendar} />
+        <p>{data}</p>
+      </div>
+    </div>
+  );
+};
+
+export default CardArticle;

src/components/UI/CardArticle/cardArticle.scss

@@ -0,0 +1,23 @@
+.card-article {
+  background: #ffffff;
+  border-radius: 12px;
+  width: 344px;
+  margin-bottom: 24px;
+
+  h5 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 17px;
+    line-height: 20px;
+    padding: 12px 16px 8px 16px;
+  }
+
+  &__data {
+    display: flex;
+    padding: 0 0 14px 16px;
+
+    img {
+      margin-right: 9px;
+    }
+  }
+}

src/pages/Blog/Blog.jsx

@@ -1,15 +1,55 @@
-import React from "react";
+import React, { useState } from "react";
 
 import AuthHeader from "../../components/AuthHeader/AuthHeader";
 import SideBar from "../../components/SideBar/SideBar";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { Footer } from "../../components/Footer/Footer";
+import CardArticle from "../../components/UI/CardArticle/CardArticle";
 
 import arrowRight from "../../images/arrowRight.png";
+import cardImg1 from "../../images/cardArticleItem.png";
+import cardImg2 from "../../images/cardArticleItem2.png";
+import cardImg3 from "../../images/cardArticleItem3.png";
+import cardImg4 from "../../images/cardArticleItem4.png";
+import cardImg5 from "../../images/cardArticleItem5.png";
+import cardImg6 from "../../images/cardArticleItem6.png";
 
 import "./blog.scss";
 
 export const Blog = ({}) => {
+  const [article] = useState([
+    {
+      image: cardImg1,
+      title: "Аутстаффинг джунов: почему это выгодно",
+      data: "1 марта, 2023",
+    },
+    {
+      image: cardImg2,
+      title: "Аутстаффинг джунов: почему это выгодно",
+      data: "1 марта, 2023",
+    },
+    {
+      image: cardImg3,
+      title: "Аутстаффинг джунов: почему это выгодно",
+      data: "1 марта, 2023",
+    },
+    {
+      image: cardImg4,
+      title: "Аутстаффинг джунов: почему это выгодно",
+      data: "1 марта, 2023",
+    },
+    {
+      image: cardImg5,
+      title: "Аутстаффинг джунов: почему это выгодно",
+      data: "1 марта, 2023",
+    },
+    {
+      image: cardImg6,
+      title: "Аутстаффинг джунов: почему это выгодно",
+      data: "1 марта, 2023",
+    },
+  ]);
+
   return (
     <div className="blog">
       <AuthHeader />
@@ -35,6 +75,20 @@ export const Blog = ({}) => {
             важными материалами, стремимся получать обратную связь
           </h3>
         </div>
+
+        <div className="blog__body">
+          {article.map((item, index) => {
+            return (
+              <CardArticle
+                images={item.image}
+                title={item.title}
+                data={item.data}
+                key={index}
+                id={index}
+              />
+            );
+          })}
+        </div>
       </div>
 
       <Footer />

src/pages/Blog/blog.scss

@@ -9,6 +9,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-bottom: 40px;
 
     h1 {
       font-weight: 500;
@@ -37,4 +38,10 @@
       }
     }
   }
+
+  &__body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
 }