+
+ );
+};
diff --git a/src/components/pages/Plan/Finish/Finish.css b/src/components/pages/Plan/Finish/Finish.css
new file mode 100644
index 0000000..b3fceb3
--- /dev/null
+++ b/src/components/pages/Plan/Finish/Finish.css
@@ -0,0 +1,26 @@
+.finish-container {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
+
+.finish-title {
+ margin: 0;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 38px;
+ line-height: 100%;
+ /* or 38px */
+ /* White */
+ color: #f2f2f2;
+}
+
+.finish-text {
+ margin: 0;
+
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 140%;
+ color: #c5c7ce;
+}
diff --git a/src/components/pages/Plan/Finish/Finish.tsx b/src/components/pages/Plan/Finish/Finish.tsx
new file mode 100644
index 0000000..94c6da6
--- /dev/null
+++ b/src/components/pages/Plan/Finish/Finish.tsx
@@ -0,0 +1,16 @@
+import "./Finish.css";
+
+export const Finish: React.FCВыберите дату.
+
+
+ {week.map((day: any, i: number) => (
+
+ ))}
+
+
+ ![prev-mouth]()
!thisMonth() && setValue(prevMonth())}
+ className="calendar-nav calendar-nav-left"
+ src={chevron}
+ >
+
+ {value.format("MMMM")}, {value.format("YYYY")}
+
+ ![next-mouth]()
setValue(nextMonth())}
+ className="calendar-nav"
+ src={chevron}
+ >
+
+
+ {weekDays.map((day, i) => (
+
+ {calendar.map((week, i) => (
+
+ {day}
+
+ ))}
+ handleValue(day)}
+ className={hide(day)}
+ >
+ {day.format("D")}
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/pages/Plan/Form/Form.css b/src/components/pages/Plan/Form/Form.css
new file mode 100644
index 0000000..c56d83f
--- /dev/null
+++ b/src/components/pages/Plan/Form/Form.css
@@ -0,0 +1,42 @@
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.form-input-container {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.form-input {
+ background: #23242a;
+ box-sizing: border-box;
+ outline: none;
+ border-radius: 2px;
+ padding: 12px 16px;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 135%;
+ color: #c5c7ce;
+ border: 10px solid transparent;
+ border-image-slice: 1;
+ border-width: 1px;
+
+}
+
+.form-input-caption {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 140%;
+ color: #c5c7ce;
+}
+
+.form-input:focus {
+ border-image-source: linear-gradient(180deg, #bc75ff 0%, #798fff 100%);
+}
+
+.form-input:invalid {
+ border: 1px solid #E94444;
+}
\ No newline at end of file
diff --git a/src/components/pages/Plan/Form/Form.tsx b/src/components/pages/Plan/Form/Form.tsx
new file mode 100644
index 0000000..28ab5db
--- /dev/null
+++ b/src/components/pages/Plan/Form/Form.tsx
@@ -0,0 +1,71 @@
+import chevron from "images/icons/ChevronLeft.svg";
+import "./Form.css";
+
+import { planSlice } from "store/reducers/planSlice";
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+
+export const Form: React.FCПросмотр запланирован.
++ Ссылка для подключения и другая дополнительная информация будут + отправлены на ваш почтовый адрес. +
+ +
+
+ Расскажите
+
+
+ );
+};
diff --git a/src/components/pages/Plan/PlanComponent.css b/src/components/pages/Plan/PlanComponent.css
new file mode 100644
index 0000000..f620c06
--- /dev/null
+++ b/src/components/pages/Plan/PlanComponent.css
@@ -0,0 +1,145 @@
+.content-container-plan {
+ height: 100vh;
+ width: 428px;
+ justify-content: center;
+ padding: 24px 56px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ box-sizing: border-box;
+ border-width: 0px 2px;
+ border-style: solid;
+ border-color: #23242a;
+ transform: translate(-50%, -50%);
+}
+
+.calendar-position {
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.plan-logo {
+ width: 158px;
+ height: 46px;
+}
+
+.plan-title {
+ margin-top: 0;
+ margin-bottom: 32px;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 38px;
+ line-height: 100%;
+ color: #f2f2f2;
+}
+
+.calendar-date {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 20px;
+ line-height: 120%;
+ color: #f2f2f2;
+ user-select: none;
+}
+
+.calendar-table {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ justify-content: center;
+ background: transparent;
+ gap: 5px;
+}
+
+
+
+.calendar-table:nth-child(odd) {
+ background: #1c1d21;
+}
+
+.calendar-cell {
+ user-select: none;
+ background: transparent;
+ cursor: auto;
+ padding: 3px 5px;
+ width: 100%;
+ height: 40px;
+ border-radius: 4px;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 140%;
+ color: #f2f2f2;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+}
+
+.calendar-cell_day {
+ cursor: pointer;
+}
+
+.calendar-cell_day:hover {
+ background: #23242a;
+}
+
+.calendar-cell-none {
+ visibility: hidden;
+}
+
+.line-calendar {
+ margin-top: 32px;
+ margin-bottom: 16px;
+}
+
+.button-plan {
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+
+.plan-title-plan {
+ margin: 0;
+}
+
+@media screen and (max-width: 920px) {
+ .calendar-position {
+ top: 50%;
+ }
+}
+
+@media screen and (max-width: 430px) {
+
+
+ .content-container-plan {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ padding: 10px;
+ }
+
+ .calendar {
+ width: 100%;
+ }
+
+ .plan-logo {
+ display: none;
+ }
+
+ .plan-title {
+ margin-top: 32px;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 125%;
+ white-space: nowrap;
+ }
+}
+
+@media screen and (max-width: 380px) {
+ .calendar-position {
+ top: 60%;
+ }
+}
\ No newline at end of file
diff --git a/src/components/pages/Plan/PlanComponent.tsx b/src/components/pages/Plan/PlanComponent.tsx
new file mode 100644
index 0000000..5852abc
--- /dev/null
+++ b/src/components/pages/Plan/PlanComponent.tsx
@@ -0,0 +1,88 @@
+import "./PlanComponent.css";
+import logo from "./Aivaz.svg";
+
+import { useState } from "react";
+
+import * as moment from "moment";
+import "moment/locale/ru";
+import { motion, AnimatePresence } from "framer-motion";
+
+import { CalendarComponent } from "./CalendarComponent/CalendarComponent";
+import { TimepickerComponent } from "./TimepickerComponent/TimepickerComponent";
+import { Form } from "./Form/Form";
+
+import { Finish } from "./Finish/Finish";
+import { useAppSelector } from "hooks/redux";
+import { popupAnimation } from "utils/animationProps";
+
+export const PlanComponent: React.FC
+ Расскажите
о себе.
+
+
+
+
+
+ {time.format("DD MMM, LT")}
+
+
+
+ 
+
+ );
+};
diff --git a/src/components/pages/Plan/TimepickerComponent/TimepickerComponent.css b/src/components/pages/Plan/TimepickerComponent/TimepickerComponent.css
new file mode 100644
index 0000000..520beac
--- /dev/null
+++ b/src/components/pages/Plan/TimepickerComponent/TimepickerComponent.css
@@ -0,0 +1,30 @@
+.button-plan {
+ margin-top: 16px;
+ margin-bottom: 16px;
+}
+
+.plan-title-plan {
+ margin: 0;
+}
+
+.timepicker-cell {
+ padding: 9px 18px;
+ width: 72px;
+ cursor: pointer;
+}
+
+.timepicker-cell:hover {
+ background: #23242a;
+}
+
+.timepicker-table {
+ display: grid;
+ justify-content: center;
+ background: transparent;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 8px;
+}
+
+.timepicker-table:nth-child(even) {
+ background: #1c1d21;
+}
diff --git a/src/components/pages/Plan/TimepickerComponent/TimepickerComponent.tsx b/src/components/pages/Plan/TimepickerComponent/TimepickerComponent.tsx
new file mode 100644
index 0000000..fa0395e
--- /dev/null
+++ b/src/components/pages/Plan/TimepickerComponent/TimepickerComponent.tsx
@@ -0,0 +1,83 @@
+import chevron from "images/icons/ChevronLeft.svg";
+import "./TimepickerComponent.css";
+
+import { planSlice } from "store/reducers/planSlice";
+import { useAppDispatch, useAppSelector } from "hooks/redux";
+
+import { useEffect, useState } from "react";
+
+export const TimepickerComponent: React.FC
+
+ {isCalendar && (
+
+
+ )}
+ {isTimepicker && (
+
+
+ )}
+ {isForm && (
+
+
+
+ )}
+ {isDone && (
+
+
+ )}
+
+ {!isDone && (
+ <>
+
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/images/icons/ChevronLeft.svg b/src/images/icons/ChevronLeft.svg
new file mode 100644
index 0000000..a545424
--- /dev/null
+++ b/src/images/icons/ChevronLeft.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/icons/ChevronRight.svg b/src/images/icons/ChevronRight.svg
new file mode 100644
index 0000000..fa19293
--- /dev/null
+++ b/src/images/icons/ChevronRight.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/store/reducers/planSlice.ts b/src/store/reducers/planSlice.ts
new file mode 100644
index 0000000..abc56cd
--- /dev/null
+++ b/src/store/reducers/planSlice.ts
@@ -0,0 +1,50 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { Moment } from "moment";
+import * as moment from "moment";
+import "moment/locale/ru";
+
+interface IState {
+ isCalendar: boolean;
+ isTimepicker: boolean;
+ isForm: boolean;
+ isDone: boolean;
+}
+
+export interface planState {
+ time: Moment;
+ isCalendar: boolean;
+ isTimepicker: boolean;
+ isForm: boolean;
+ isDone: boolean;
+ email: string;
+ name: string;
+}
+
+const initialState: planState = {
+ time: moment.default(),
+ isCalendar: true,
+ isTimepicker: false,
+ isForm: false,
+ isDone: false,
+ email: "",
+ name: "",
+};
+
+export const planSlice = createSlice({
+ name: "plan",
+ initialState,
+ reducers: {
+ handleNavigation(state, action: PayloadActionВыберите время.
+ +
+
+
+ {time.format("DD MMMM")}
+
+ {timePicker.map((day, i) => (
+
+ {day.map((time: any, i: number) => (
+
+ ))}
+ handleValue(time)}
+ key={i}
+ className="calendar-cell timepicker-cell"
+ >
+ {time.format("LT")}
+
+ ))}
+