chore: continue migrate to next13 and redesign -

layout for decstop is finished

hospital-next/.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/babel","next/core-web-vitals"]
-}
+  "extends": "next/core-web-vitals"
+}

hospital-next/src/app/components/CheckBox/CheckBox.module.css

@@ -0,0 +1,23 @@
+
+.input{
+    width: 1.6em;
+    height: 1.6em;
+    border-radius: 0.15em;
+    margin-right: 0.5em;
+    border: 0.15em solid #007a7e;
+    background-color: rgba(17, 224, 121, 0.211);;
+    outline: none;
+    cursor: pointer;
+}
+.inputError{
+    outline-color: red;
+}
+.inputDisabled{
+    cursor: default;
+    opacity: 50;
+}
+.textCheckBox {
+    font-size: 15px;
+    color: #686868;
+    line-height: 1.5;
+}

hospital-next/src/app/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,36 @@
+'use client';
+import React from 'react';
+import styles from './CheckBox.module.css';
+import clsx from 'clsx';
+
+import { FieldErrors, FieldValues, UseFormRegister } from 'react-hook-form';
+
+interface CheckBoxProps {
+    label?: string;
+    id: string;
+    required?: boolean;
+    register?: UseFormRegister<FieldValues>;
+    errors?: FieldErrors;
+    disabled?: boolean;
+}
+
+const CheckBox: React.FC<CheckBoxProps> = ({ label, id, required, register, errors, disabled }) => {
+    return (
+        <label htmlFor={id}>
+            <input
+                id={id}
+                type="checkbox"
+                autoComplete={id}
+                disabled={disabled}
+                className={clsx(`
+            ${styles.input}
+
+            ${disabled && styles.inputDisabled}
+        `)}
+            />
+            <span className={styles.textCheckBox}>{label}</span>
+        </label>
+    );
+};
+
+export default CheckBox;

hospital-next/src/app/components/Feedback/Feedback.tsx

@@ -5,6 +5,7 @@ import styles from './Feedback.module.css';
 import Input from '../Input/Input';
 import Button from '../Button/Button';
 import Textarea from '../Textarea/Textarea';
+import CheckBox from '../CheckBox/CheckBox';
 import Link from 'next/link';
 
 const Feedback: React.FC = () => {
@@ -35,13 +36,16 @@ const Feedback: React.FC = () => {
             <Input label="Email" register={register} id={'email'} errors={errors} type="email" />
             <Input label="Телефон" register={register} id={'phone'} errors={errors} />
             <Textarea label="Ваше сообщение" register={register} id={'message'} errors={errors} />
-            <div>
-                <Input register={register} id={'phone'} errors={errors} type="checkBox" />
-                <p>
-                    Отправляя запрос, вы соглашаетесь с нашей{' '}
-                    <Link href={'/privacyPolicy'}>политикой конфиденциальности</Link>
-                </p>
-            </div>
+            <CheckBox
+                label={'Я согласен с использованием необходимых технологий Cookie для обработки моего запроса.'}
+                register={register}
+                id={'phone'}
+                errors={errors}
+            />
+            <p>
+                Отправляя запрос, вы соглашаетесь с нашей{' '}
+                <Link href={'/privacyPolicy'}>политикой конфиденциальности</Link>
+            </p>
             <Button title="Отправить" disabled={loading} type="submit"></Button>
         </form>
     );

hospital-next/src/app/components/Footer/Footer.tsx

@@ -61,7 +61,7 @@ export default function Footer() {
                                     <Link href={'/questions'}>Часто задаваемые вопросы</Link>
                                 </li>
                                 <li>
-                                    <Link href={'/covid'}>COVID-19</Link>
+                                    <Link href={'/questions'}>COVID-19</Link>
                                 </li>
                             </ul>
                         </li>

hospital-next/src/app/components/Input/Input.module.css

@@ -1,5 +1,4 @@
 .inputWrapper{
-    margin-top: 2px;
     width: 100%;
 }
 .input{

hospital-next/src/app/components/Subscription/Subscription.module.css

@@ -1,7 +1,6 @@
 
 .content {
 width: 360px;
-height: 40px;
 box-shadow: 2px 4px 10px rgba(0, 0, 0, .2);
 border-radius: 60px;
 overflow: hidden;

hospital-next/src/app/components/Subscription/Subscription.tsx

@@ -1,17 +1,31 @@
 'use client';
 import React, { useState } from 'react';
+import { FieldValues, useForm, SubmitHandler } from 'react-hook-form';
 import styles from './Subscription.module.css';
 import Button from '../Button/Button';
 import Input from '../Input/Input';
 
 const Subscription: React.FC = () => {
     const [submit, setSubmit] = useState(false);
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<FieldValues>({
+        defaultValues: {
+            email: '',
+        },
+    });
+    const onSubmit: SubmitHandler<FieldValues> = (data) => {};
     return (
         <div className={styles.subscriptionContainer}>
             <div className={styles.container}>
                 <div className={styles.content}>
-                    <form className={`${styles.subscription} ${submit ? styles.done : styles.test}`}>
-                        <Input type="email" placeholder="[email protected]" />
+                    <form
+                        className={`${styles.subscription} ${submit ? styles.done : styles.test}`}
+                        onSubmit={handleSubmit(onSubmit)}
+                    >
+                        <Input register={register} id={'Email'} errors={errors} type="email" />
                         <button
                             className={styles.submitEmail}
                             type="button"

hospital-next/src/app/contacts/page.jsx

@@ -4,6 +4,7 @@ import HeaderPage from '../components/HeaderPage/HeaderPage';
 import { url } from '../utils/const/url';
 import styles from './page.module.css';
 import Feedback from '../components/Feedback/Feedback';
+import Subscription from '../components/Subscription/Subscription';
 
 export default function Page() {
     return (
@@ -45,6 +46,13 @@ export default function Page() {
                     </div>
                 </div>
             </section>
+            <div className={styles.subscriptionContainer}>
+                <div>
+                    <h2>Подпишитесь на новости</h2>
+                    <span>Мы сообщим о начале акциях и новых скидках</span>
+                </div>
+                <Subscription />
+            </div>
         </main>
     );
 }

hospital-next/src/app/contacts/page.module.css

@@ -51,4 +51,12 @@
 }
 .phoneCall li{
     padding: 5px 0px;
-}
+}
+.subscriptionContainer{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 20px 0px;
+    border-top: 1px solid #e3e3e3;
+    border-bottom: 1px solid #e3e3e3;
+  }

hospital-next/src/app/privacyPolicy/page.module.css

@@ -0,0 +1,36 @@
+.container{
+    padding: 20px 55px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.content{
+    width: 50%;
+}
+.container h2{
+    color: #3b3b3b;
+    font-size: 32px;
+    text-align: center;
+    margin-bottom: 50px;
+}
+.container h3{
+    font-size: 22px;
+    font-weight: 500;
+    color: #3b3b3b;
+    margin-bottom: 20px;
+    margin-top: 30px;
+    line-height: 1.3;
+}
+.container p{
+    font-size: 1em;
+    line-height: 1.6;
+    margin-bottom: 15px;    
+    color: #686868;
+}
+.container h4{
+    font-size: 17px;
+    font-weight: 500;
+    color: #4d4d51;
+    line-height: 1.5;
+    margin-top: 20px;
+}