feat: add cookie page

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