Create new page Blog

src/App.js

@@ -39,6 +39,7 @@ import { PassingTests } from "./pages/quiz/PassingTests";
 import "./assets/global.scss";
 import "./fonts/stylesheet.css";
 import "bootstrap/dist/css/bootstrap.min.css";
+import Blog from "./pages/Blog/Blog";
 
 const App = () => {
   return (
@@ -50,7 +51,7 @@ const App = () => {
           <Route exact path="/worker/:id" element={<FreeDevelopers />} />
           <Route
             exact
-            path="/tracker/:id"
+            path="/tracker/task/:id"
             element={<TicketFullScreen />}
           ></Route>
           <Route exact path="/auth-candidate" element={<AuthForCandidate />} />
@@ -60,6 +61,8 @@ const App = () => {
             element={<RegistrationForCandidate />}
           />
 
+          <Route exact path="/blog" element={<Blog />}></Route>
+
           <Route exact path="/candidate/:id" element={<Candidate />} />
           <Route exact path="/candidate/:id/form" element={<FormPage />} />
           <Route path="/:userId/calendar" element={<Calendar />} />

src/components/SideBar/SideBar.jsx

@@ -4,6 +4,7 @@ import arrow from "../../images/sideBarArrow.svg";
 import LogoITguild from "../../images/LogoITguild.svg";
 
 import "./sidebar.scss";
+import { Link } from "react-router-dom";
 
 export const SideBar = () => {
   const [active, setActive] = useState(false);
@@ -46,10 +47,10 @@ export const SideBar = () => {
         </div>
         <ul className="auth-body__navigation">
           <li>
-            <a href="#">Вход для партнеров</a>
+            <Link to={"/auth"}>Вход для партнеров</Link>
           </li>
           <li>
-            <a href="#">Кабинет разработчика</a>
+            <Link to={"/auth"}>Кабинет разработчика</Link>
           </li>
           <li>
             <a href="#">Школа</a>
@@ -61,7 +62,7 @@ export const SideBar = () => {
             <a href="#">Контакты</a>
           </li>
           <li>
-            <a href="#">Блог</a>
+            <Link to={"/blog"}>Блог</Link>
           </li>
           <li>
             <a href="#">FAQ</a>

src/components/UI/ModalTicket/ModalTicket.jsx

@@ -52,7 +52,7 @@ export const ModalTiсket = ({ active, setActive, index }) => {
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
             Проект: {tiket.name}
-            <Link to={`/tracker/${index}`} className="title-project__full">
+            <Link to={`/tracker/task/${index}`} className="title-project__full">
               <img src={fullScreen}></img>
             </Link>
           </h3>

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%;
+      }
+    }
+  }
+}