feat: page template

src/widgets/breadcrumbs/styles.module.scss

@@ -0,0 +1,74 @@
+.Container {
+  background-color: transparent;
+  background-image: linear-gradient(150deg, #23a455 60%, #58c644 80%);
+
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.Breadcrumbs {
+  margin: 0 auto;
+  width: rem(1540px);
+  padding: rem(20px) 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .Block {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .List {
+      display: flex;
+      flex-direction: row;
+      //gap: 12px;
+    }
+
+    .ListItem {
+      font-family: $font-roboto;
+      font-weight: $font-regular;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-white;
+
+      &:after {
+        content: '/';
+        padding: 0 4px;
+      }
+
+      &:last-child:after {
+        content: '';
+      }
+    }
+  }
+
+  .Advertise {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    border-radius: rem(20px);
+    background: $color-white;
+    padding: rem(20px);
+
+    .Description {
+      font-family: $font-roboto;
+      font-weight: $font-light;
+      font-size: rem(16px);
+      line-height: 100%;
+      color: $color-text;
+    }
+  }
+
+}
+
+.Header {
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: rem(48px);
+  line-height: 110%;
+  color: $color-white;
+}

src/widgets/breadcrumbs/ui.tsx

@@ -0,0 +1,36 @@
+import s from './styles.module.scss';
+import Link from 'next/link';
+import { ROUTES } from '@core/constants/route';
+import Image from 'next/image';
+import sberImg from '@public/images/sber-domclick.jpg';
+
+type BreadcrumbsProps = {
+  breadcrumbs: {
+    name: string;
+    path: string;
+  }[];
+};
+
+export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
+  return (
+    <section className={s.Container}>
+      <div className={s.Breadcrumbs}>
+        <div className={s.Block}>
+          <ul className={s.List}>
+            <li className={s.ListItem}>
+              <Link href={ROUTES.HOME}>ДИ ТРАСО</Link>
+            </li>
+            <li className={s.ListItem}>
+              <Link href={breadcrumbs[0].path}>{breadcrumbs[0].name}</Link>
+            </li>
+          </ul>
+          <h2 className={s.Header}>{breadcrumbs[1].name}</h2>
+        </div>
+        <div className={s.Advertise}>
+          <Image src={sberImg} alt={'Сбербанк, Дом-клик'} width={400} />
+          <p className={s.Description}>Аккредитованая оценочная компания</p>
+        </div>
+      </div>
+    </section>
+  );
+}