diff --git a/public/svg/checkbox.svg b/public/svg/checkbox.svg new file mode 100644 index 0000000..3c744ee --- /dev/null +++ b/public/svg/checkbox.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/app/cookie/page.tsx b/src/app/cookie/page.tsx new file mode 100644 index 0000000..1c0ca3f --- /dev/null +++ b/src/app/cookie/page.tsx @@ -0,0 +1,9 @@ +import { Cookie } from '@views/cookie'; + +export default function CookiePage() { + return ( +
+ +
+ ); +} diff --git a/src/entities/home/consultation-modal/ui.tsx b/src/entities/home/consultation-modal/ui.tsx index 9a26d42..5eaa309 100644 --- a/src/entities/home/consultation-modal/ui.tsx +++ b/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) { /> )} /> + diff --git a/src/shared/ui/checkbox/checkbox.module.scss b/src/shared/ui/checkbox/checkbox.module.scss new file mode 100644 index 0000000..f156470 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/shared/ui/checkbox/checkbox.tsx b/src/shared/ui/checkbox/checkbox.tsx new file mode 100644 index 0000000..741ce17 --- /dev/null +++ b/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, HTMLInputElement>; + +export default function Checkbox({ ...props }: CheckboxProps) { + const { label, error } = props; + + return ( +
+ +
+
{label}
+
+ ); +} diff --git a/src/shared/ui/checkbox/index.ts b/src/shared/ui/checkbox/index.ts new file mode 100644 index 0000000..5c29f9f --- /dev/null +++ b/src/shared/ui/checkbox/index.ts @@ -0,0 +1 @@ +export { default as Checkbox } from './checkbox'; diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index 7f43409..fc0b1e7 100644 --- a/src/shared/ui/index.ts +++ b/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'; diff --git a/src/views/cookie/index.ts b/src/views/cookie/index.ts new file mode 100644 index 0000000..bfeb621 --- /dev/null +++ b/src/views/cookie/index.ts @@ -0,0 +1 @@ +export { default as Cookie } from './ui'; diff --git a/src/views/cookie/styles.module.scss b/src/views/cookie/styles.module.scss new file mode 100644 index 0000000..4d2911c --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/views/cookie/ui.tsx b/src/views/cookie/ui.tsx new file mode 100644 index 0000000..dbd2418 --- /dev/null +++ b/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 ( +
+ + + + +

Мы используем cookie

+

+ Когда вы посещаете сайт {WEB}, наша компания может использовать + общеотраслевую технологию, называемую cookie. Файлы cookie представляют + собой небольшие фрагменты данных, которые временно сохраняются на вашем + компьютере или мобильном устройстве и обеспечивают более эффективную + работу сайта. +

+

+ Сайт {WEB} использует метрические системы для сбора статистики: + «Яндекс.Метрика». На основе этих данных мы делаем наш сайт лучше и + эффективнее для пользователей. +

+

+ Продолжая пользоваться этим сайтом, вы соглашаетесь на использование + cookie и обработку данных в соответствии с Политикой сайта в области + обработки и защиты персональных данных. +

+

+ + Согласие на обработку персональных данных посетителей сайта + +

+

+ Если вы не хотите использовать cookie, вы можете отключить их в + настройках безопасности вашего браузера. Отключение cookie следует + выполнить для каждого браузера и устройства, с помощью которого + осуществляется вход на сайт. +

+

+ Обратите внимание, что в случае, если использование сайтом файлов cookie + отключено, некоторые возможности и услуги сайта могут быть недоступны. +

+
+ ); +}