made breadcrumbs

src/app/[locale]/about-us/AboutUs.scss

@@ -7,7 +7,7 @@
     width: fit-content;
   }
 
-  img {
+  &__image {
     align-self: center;
     margin-bottom: 65px;
     border-radius: 12px;

src/app/[locale]/about-us/page.tsx

@@ -3,32 +3,68 @@ import "./AboutUs.scss";
 import Image from "next/image";
 import header from "./assets/header.svg";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | О нас",
-  description:
-    'Страница "О Нас" KG ROAD',
+  description: 'Страница "О Нас" KG ROAD',
 };
 
 const AboutUs = () => {
   return (
     <div className="about-us page-padding">
+      <BreadCrumbs homeRequired />
       <Typography element="h2">О нас</Typography>
 
-      <Image src={header} alt="Header Image" />
+      <Image
+        className="about-us__image"
+        src={header}
+        alt="Header Image"
+      />
       <div className="about-us__descriptions">
-        <p>Transparency International-Кыргызстан - филиал международной организации Transparency International в Кыргызской Республике.</p>
+        <p>
+          Transparency International-Кыргызстан - филиал международной
+          организации Transparency International в Кыргызской
+          Республике.
+        </p>
         <h4>Миссия ТИ-Кыргызстан</h4>
-        <p>Продвижение эффективной общественной политики и надлежащего управления в целях предотвращения коррупции и усиления демократии в стране.        </p>
+        <p>
+          Продвижение эффективной общественной политики и надлежащего
+          управления в целях предотвращения коррупции и усиления
+          демократии в стране.{" "}
+        </p>
         <h4>Цели и приоритеты ТИ-Кыргызстан:</h4>
         <ul>
-          <li> - антикоррупционное просвещение населения, повышение общественного осознания значимости и важности борьбы с коррупцией в Кыргызстане;</li>
-          <li> - организация изучения практики и теории борьбы с коррупцией и участия в ней структур гражданского общества в Кыргызстане и других странах;</li>
-          <li> - содействие гражданам и организациям в реализации их конституционных прав и свобод;</li>
-          <li> - преимущественная ориентация на международный опыт уменьшения коррупции, освоение его технологий, ресурсов, а также включение структур гражданского общества в международный диалог борьбы с коррупцией.</li>
+          <li>
+            {" "}
+            - антикоррупционное просвещение населения, повышение
+            общественного осознания значимости и важности борьбы с
+            коррупцией в Кыргызстане;
+          </li>
+          <li>
+            {" "}
+            - организация изучения практики и теории борьбы с
+            коррупцией и участия в ней структур гражданского общества
+            в Кыргызстане и других странах;
+          </li>
+          <li>
+            {" "}
+            - содействие гражданам и организациям в реализации их
+            конституционных прав и свобод;
+          </li>
+          <li>
+            {" "}
+            - преимущественная ориентация на международный опыт
+            уменьшения коррупции, освоение его технологий, ресурсов, а
+            также включение структур гражданского общества в
+            международный диалог борьбы с коррупцией.
+          </li>
         </ul>
       </div>
-      <p>Photo By Mzximvs VdB from Brussels, belgium - Road to Issyk-Kul (south shore), CC BY-SA 2.0</p>
+      <p>
+        Photo By Mzximvs VdB from Brussels, belgium - Road to
+        Issyk-Kul (south shore), CC BY-SA 2.0
+      </p>
     </div>
   );
 };

src/app/[locale]/create-report/page.tsx

@@ -2,11 +2,11 @@ import Typography from "@/shared/ui/components/Typography/Typography";
 import "./CreateReport.scss";
 import dynamic from "next/dynamic";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Написать обращение",
-  description:
-    "Написать обращение KG ROAD",
+  description: "Написать обращение KG ROAD",
 };
 
 const DynamicForm = dynamic(
@@ -19,6 +19,7 @@ const DynamicForm = dynamic(
 const CreateReport = () => {
   return (
     <div className="create-report page-padding">
+      <BreadCrumbs homeRequired />
       <Typography element="h2">Написать обращение</Typography>
 
       <DynamicForm />

src/app/[locale]/news/News.scss

@@ -1,21 +1,25 @@
 .news {
   display: flex;
   flex-direction: column;
-  gap: 40px;
 
   h2 {
     width: fit-content;
+    margin-bottom: 40px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .news {
-    gap: 30px;
+    h2 {
+      margin-bottom: 30px;
+    }
   }
 }
 
 @media screen and (max-width: 550px) {
   .news {
-    gap: 20px;
+    h2 {
+      margin-bottom: 20px;
+    }
   }
 }

src/app/[locale]/news/[id]/page.tsx

@@ -6,6 +6,7 @@ import Image from "next/image";
 import message from "./icons/message.svg";
 import calendar from "./icons/calendar.svg";
 import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 const NewsDetails = async ({
   params,
@@ -39,6 +40,7 @@ const NewsDetails = async ({
 
   return (
     <div className="news-details page-padding">
+      <BreadCrumbs />
       <Typography element="h2">{data.title}</Typography>
 
       <div className="news-details__img">

src/app/[locale]/news/page.tsx

@@ -1,3 +1,4 @@
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import "./News.scss";
 import Typography from "@/shared/ui/components/Typography/Typography";
 import NewsList from "@/widgets/NewsList/NewsList";
@@ -5,8 +6,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Новости",
-  description:
-    "Страница новостей KG ROAD",
+  description: "Страница новостей KG ROAD",
 };
 
 const News = ({
@@ -18,6 +18,8 @@ const News = ({
 }) => {
   return (
     <div className="news page-padding">
+      <BreadCrumbs homeRequired />
+
       <Typography element="h2">Новости</Typography>
 
       <NewsList searchParams={searchParams} />

src/app/[locale]/profile/layout.tsx

@@ -7,11 +7,11 @@ import { apiInstance } from "@/shared/config/apiConfig";
 import { getServerSession } from "next-auth";
 import { authConfig } from "@/shared/config/authConfig";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Профиль",
-  description:
-    "Страница профиля KG ROAD",
+  description: "Страница профиля KG ROAD",
 };
 
 const Profile = async ({
@@ -43,6 +43,7 @@ const Profile = async ({
 
   return (
     <div className="profile page-padding">
+      <BreadCrumbs />
       <Typography element="h2">Личный кабинет</Typography>
       <ProfileNav report_count={data?.report_count as number} />
 

src/app/[locale]/report/[id]/page.tsx

@@ -25,6 +25,7 @@ const ReportDetails = async ({
 }: {
   params: { id: string };
 }) => {
+  console.log(JSON.parse(params.id));
   const getReportDetails = async () => {
     const res = await fetch(
       `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
@@ -37,7 +38,7 @@ const ReportDetails = async ({
 
   return (
     <div className="report-details page-padding">
-      <BreadCrumbs />
+      <BreadCrumbs homeRequired />
       <div className="report-details__container">
         <ReportInformation
           id={report.id}

src/app/[locale]/sign-in/forgot-password/page.tsx

@@ -1,10 +1,14 @@
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 import "@/shared/ui/auth-classes.scss";
 import ForgotPasswordForm from "@/widgets/forms/ForgotPasswordForm/ForgotPasswordForm";
 
 const ForgotPassword = () => {
   return (
-    <div className="auth-page">
-      <ForgotPasswordForm />
+    <div className="page-padding">
+      <BreadCrumbs />
+      <div className="auth-page">
+        <ForgotPasswordForm />
+      </div>
     </div>
   );
 };

src/app/[locale]/sign-up/confirm-email/page.tsx

@@ -2,6 +2,7 @@ import "@/shared/ui/auth-classes.scss";
 import Image from "next/image";
 import mail from "./icons/mail.svg";
 import ConfirmEmailForm from "@/widgets/forms/ConfirmEmailForm/ConfirmEmailForm";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 const ConfirmEmail = ({
   searchParams,
@@ -11,16 +12,24 @@ const ConfirmEmail = ({
   };
 }) => {
   return (
-    <div className="auth-page">
-      <div className="auth-wrapper">
-        <div className="auth-icon2">
-          <Image src={mail} alt="Mail icon" width={56} height={56} />
+    <div className="page-padding">
+      <BreadCrumbs />
+      <div className="auth-page">
+        <div className="auth-wrapper">
+          <div className="auth-icon2">
+            <Image
+              src={mail}
+              alt="Mail icon"
+              width={56}
+              height={56}
+            />
+          </div>
+          <div className="auth-header">
+            <h2>Проверьте свою почту</h2>
+            <p>Мы отправили код на почту {searchParams.email}</p>
+          </div>
+          <ConfirmEmailForm email={searchParams.email} />
         </div>
-        <div className="auth-header">
-          <h2>Проверьте свою почту</h2>
-          <p>Мы отправили код на почту {searchParams.email}</p>
-        </div>
-        <ConfirmEmailForm email={searchParams.email} />
       </div>
     </div>
   );

src/app/[locale]/statistics/Statistics.scss

@@ -1,21 +1,25 @@
 .statistics {
   display: flex;
   flex-direction: column;
-  gap: 40px;
 
   h2 {
     width: fit-content;
+    margin-bottom: 40px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .statistics {
-    gap: 30px;
+    h2 {
+      margin-bottom: 30px;
+    }
   }
 }
 
 @media screen and (max-width: 550px) {
   .statistics {
-    gap: 20px;
+    h2 {
+      margin-bottom: 20px;
+    }
   }
 }

src/app/[locale]/statistics/page.tsx

@@ -2,11 +2,11 @@ import Typography from "@/shared/ui/components/Typography/Typography";
 import "./Statistics.scss";
 import StatisticsTable from "@/widgets/tables/StatisticsTable/StatisticsTable";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Статистика",
-  description:
-    "Страница статистики KG ROAD",
+  description: "Страница статистики KG ROAD",
 };
 
 const Statistics = ({
@@ -16,6 +16,7 @@ const Statistics = ({
 }) => {
   return (
     <div className="statistics page-padding">
+      <BreadCrumbs homeRequired />
       <Typography element="h2">Статистика</Typography>
       <StatisticsTable searchParams={searchParams} />
     </div>

src/app/[locale]/volunteers/Volunteers.scss

@@ -1,21 +1,25 @@
 .volunteers {
   display: flex;
   flex-direction: column;
-  gap: 40px;
 
   h2 {
     width: fit-content;
+    margin-bottom: 40px;
   }
 }
 
 @media screen and (max-width: 768px) {
   .volunteers {
-    gap: 30px;
+    h2 {
+      margin-bottom: 30px;
+    }
   }
 }
 
 @media screen and (max-width: 550px) {
   .volunteers {
-    gap: 20px;
+    h2 {
+      margin-bottom: 20px;
+    }
   }
 }

src/app/[locale]/volunteers/page.tsx

@@ -2,16 +2,18 @@ import Typography from "@/shared/ui/components/Typography/Typography";
 import "./Volunteers.scss";
 import VolunteersTable from "@/widgets/tables/VolunteersTable/VolunteersTable";
 import { Metadata } from "next";
+import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
 
 export const metadata: Metadata = {
   title: "KG ROAD | Волонтеры",
-  description:
-    "Страница волонтеров KG ROAD",
+  description: "Страница волонтеров KG ROAD",
 };
 
 const Volunteers = () => {
   return (
     <div className="volunteers page-padding">
+      <BreadCrumbs homeRequired />
+
       <Typography element="h2">Волонтеры</Typography>
       <VolunteersTable />
     </div>