Create new page Blog

src/pages/Blog/Blog.jsx

@@ -0,0 +1,45 @@
+import React 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 arrowRight from "../../images/arrowRight.png";
+
+import "./blog.scss";
+
+export const Blog = ({}) => {
+  return (
+    <div className="blog">
+      <AuthHeader />
+      <SideBar />
+
+      <div className="container">
+        <div className="blog__breadCrumbs">
+          <ProfileBreadcrumbs
+            links={[
+              { name: "Главная", link: "/auth" },
+              { name: "Блог", link: "/blog" },
+            ]}
+          />
+        </div>
+
+        <div className="blog__title">
+          <h1>Блог</h1>
+          <div className="blog__title-arrow">
+            <img src={arrowRight} />
+          </div>
+          <h3>
+            Из первых уст рассказываем о себе пользователям, делимся полезными и
+            важными материалами, стремимся получать обратную связь
+          </h3>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Blog;

src/pages/Blog/blog.scss

@@ -0,0 +1,40 @@
+.blog {
+  background: #f1f1f1;
+
+  &__breadCrumbs {
+    margin-top: 30px;
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    h1 {
+      font-weight: 500;
+      font-size: 48px;
+      line-height: 32px;
+    }
+
+    h3 {
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 28px;
+    }
+
+    &-arrow {
+      margin: 0 27px 0 20px;
+      background: #80777769;
+      border-radius: 44px;
+      width: 30px;
+      height: 27px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 56%;
+      }
+    }
+  }
+}