made breadcrumbs

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>