Fixed imports in pages

src/components/CardArticle/CardArticle.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+import cardCalendar from "assets/icons/cardCalendar.svg";
+
+import "./cardArticle.scss";
+
+export const CardArticle = ({ images, title, data, id }) => {
+  return (
+    <div className="card-article">
+      <Link to={`/blog/article/${id}`}>
+        <img src={images} />
+        <h5>{title}</h5>
+        <div className="card-article__data">
+          <img src={cardCalendar} />
+          <p>{data}</p>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default CardArticle;

src/components/CardArticle/cardArticle.scss

@@ -0,0 +1,36 @@
+.card-article {
+  background: #ffffff;
+  border-radius: 12px;
+  width: 344px;
+  margin-bottom: 24px;
+  transition: 0.4s;
+  a {
+    color: #000000;
+  }
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.05);
+    transition: 0.4s;
+    a {
+      color: #000000;
+    }
+  }
+
+  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;
+    }
+  }
+}