feat: add cookie page

public/svg/checkbox.svg

@@ -0,0 +1,5 @@
+<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M9.86467 0.994471C9.94004 1.07208 9.94004 1.19555 9.86467 1.27315L3.47494 7.85228C3.39639 7.93315 3.26655 7.93315 3.188 7.85228L0.13533 4.70913C0.0599584 4.63152 0.0599584 4.50805 0.13533 4.43044L0.957702 3.5837C1.03625 3.50282 1.16609 3.50282 1.24464 3.5837L3.33147 5.73237L8.75535 0.147724C8.8339 0.0668455 8.96375 0.0668453 9.0423 0.147724L9.86467 0.994471Z"
+    fill="white" />
+</svg>

src/app/cookie/page.tsx

@@ -0,0 +1,9 @@
+import { Cookie } from '@views/cookie';
+
+export default function CookiePage() {
+  return (
+    <main>
+      <Cookie />
+    </main>
+  );
+}

src/entities/home/consultation-modal/ui.tsx

@@ -1,6 +1,6 @@
 import s from './styles.module.scss';
 import { Button, Input } from '@/shared/ui';
-import { PhoneInput, TextArea } from '@shared/ui';
+import { Checkbox, PhoneInput, TextArea } from '@shared/ui';
 import { z } from 'zod';
 import { isValidPhoneNumber } from 'libphonenumber-js/min';
 import { Controller, useForm } from 'react-hook-form';
@@ -126,6 +126,7 @@ function ConsultationModal({}: ConsultationModalProps) {
             />
           )}
         />
+        <Checkbox label={'asdasdasdad'} />
         <Button className={s.SendBtn} variant='orange'>
           Отправить
         </Button>

src/shared/ui/checkbox/checkbox.module.scss

@@ -0,0 +1,72 @@
+.Container {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.Input {
+  border: none;
+  position: absolute;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: none;
+  opacity: 0;
+}
+
+.Checkbox {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 0.125rem;
+
+  border: 1px solid #e3e4e5;
+}
+
+.CheckboxError {
+  composes: Checkbox;
+  border: 1px solid #ff6969 !important;
+}
+
+.Input:hover + .Checkbox {
+  background: #f0faff;
+  border: 1px solid #94dfff;
+}
+
+.Input:focus + .Checkbox {
+  background: #f0faff;
+  border: 1px solid #94dfff;
+}
+
+.Input:checked + .Checkbox {
+  background: url(/svg/checkbox.svg) center no-repeat, #00affa;
+}
+
+.Input:checked:hover + .Checkbox {
+  background: url(/svg/checkbox.svg) center no-repeat, #00a4eb;
+}
+
+.Input:disabled + .Checkbox {
+  background: #f5f6f7;
+  border: 1px solid #e3e4e5;
+}
+
+.Input:disabled:checked + .Checkbox {
+  background: url(/svg/checkbox.svg) center no-repeat, #e3e4e5;
+  border: 1px solid transparent;
+}
+
+.Label {
+  font-family: $font-open-sans;
+  font-weight: $font-regular;
+  font-size: rem(12px);
+  line-height: 100%;
+  color: #333333;
+  margin-left: 0.5rem;
+}
+
+.LabelError {
+  composes: Label;
+  color: #ff6969 !important;
+}

src/shared/ui/checkbox/checkbox.tsx

@@ -0,0 +1,20 @@
+import s from './checkbox.module.scss';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+type CheckboxProps = {
+  className?: string;
+  label?: string;
+  error?: string | boolean;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+export default function Checkbox({ ...props }: CheckboxProps) {
+  const { label, error } = props;
+
+  return (
+    <div className={s.Container}>
+      <input {...props} className={s.Input} type='checkbox' />
+      <div className={!error ? s.Checkbox : s.CheckboxError} />
+      <div className={!error ? s.Label : s.LabelError}>{label}</div>
+    </div>
+  );
+}

src/shared/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './checkbox';

src/shared/ui/index.ts

@@ -4,3 +4,4 @@ export { Input } from './input';
 export { TextArea } from './text-area';
 export { PhoneInput } from './phone-input';
 export { Modal, ModalContent } from './modal';
+export { Checkbox } from './checkbox';

src/views/cookie/index.ts

@@ -0,0 +1 @@
+export { default as Cookie } from './ui';

src/views/cookie/styles.module.scss

@@ -0,0 +1,79 @@
+.Cookie {
+  position: relative;
+  margin: rem(60px) auto rem(20px);
+  width: rem(360px);
+  background: #EEE;
+  padding: rem(20px);
+  border-radius: rem(28px);
+
+  @include iftablet{
+    width: rem(600px);
+    margin: rem(40px) auto rem(20px);
+    padding: rem(20px);
+  }
+
+  @include iflaptop{
+    width: rem(800px);
+    margin: rem(60px) auto rem(20px);
+    padding: rem(60px);
+  }
+
+  @include ifdesktop{
+    width: rem(1200px);
+    margin: rem(60px) auto rem(20px);
+    padding: rem(60px);
+  }
+
+  h2 {
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(20px);
+    line-height: 130%;
+    color: $color-text;
+
+    @include iftablet{
+      font-size: rem(24px);
+    }
+  }
+
+  p {
+    font-family: $font-open-sans;
+    font-weight: $font-regular;
+    font-size: rem(14px);
+    line-height: 130%;
+    color: $color-text;
+    margin: 8px 0;
+
+    @include iftablet{
+      font-size: rem(16px);
+    }
+  }
+
+  a {
+    color: $color-orange;
+  }
+}
+
+.FloatBtn {
+  position: fixed;
+  top: rem(10px);
+  right: 50%;
+  transform: translateX(50%);
+
+  @include iftablet{
+    position: absolute;
+    top: rem(-20px);
+    right: rem(-100px);
+    transform: none;
+  }
+
+  @include iflaptop{
+    top: rem(-20px);
+    right: rem(-100px);
+  }
+
+  @include ifdesktop{
+    top: rem(-20px);
+    right: rem(-150px);
+  }
+}

src/views/cookie/ui.tsx

@@ -0,0 +1,50 @@
+import s from './styles.module.scss';
+import { Button } from '@shared/ui';
+import Link from 'next/link';
+import { WEB } from '@core/constants/privacy-policy';
+
+export default function Cookie() {
+  return (
+    <section className={s.Cookie}>
+      <Link href={'/'}>
+        <Button className={s.FloatBtn} variant={'orange'}>
+          Вернутся на главную
+        </Button>
+      </Link>
+
+      <h2>Мы используем cookie</h2>
+      <p>
+        Когда вы посещаете сайт {WEB}, наша компания может использовать
+        общеотраслевую технологию, называемую cookie. Файлы cookie представляют
+        собой небольшие фрагменты данных, которые временно сохраняются на вашем
+        компьютере или мобильном устройстве и обеспечивают более эффективную
+        работу сайта.
+      </p>
+      <p>
+        Сайт {WEB} использует метрические системы для сбора статистики:
+        «Яндекс.Метрика». На основе этих данных мы делаем наш сайт лучше и
+        эффективнее для пользователей.
+      </p>
+      <p>
+        Продолжая пользоваться этим сайтом, вы соглашаетесь на использование
+        cookie и обработку данных в соответствии с Политикой сайта в области
+        обработки и защиты персональных данных.
+      </p>
+      <p>
+        <Link href={'/privacy-policy'}>
+          Согласие на обработку персональных данных посетителей сайта
+        </Link>
+      </p>
+      <p>
+        Если вы не хотите использовать cookie, вы можете отключить их в
+        настройках безопасности вашего браузера. Отключение cookie следует
+        выполнить для каждого браузера и устройства, с помощью которого
+        осуществляется вход на сайт.
+      </p>
+      <p>
+        Обратите внимание, что в случае, если использование сайтом файлов cookie
+        отключено, некоторые возможности и услуги сайта могут быть недоступны.
+      </p>
+    </section>
+  );
+}