+ {({ errors, touched }) => (
+
+ )}
+
+ );
+};
+
+export { CustomForm };
diff --git a/src/components/main/Main.module.scss b/src/components/main/Main.module.scss
new file mode 100644
index 0000000..d8979ef
--- /dev/null
+++ b/src/components/main/Main.module.scss
@@ -0,0 +1,57 @@
+.menu__container {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+
+ @media screen and (min-width: 1025px) {
+ padding: 0 100px;
+ }
+ @media screen and (max-width: 1024px) {
+ flex-direction: column;
+ }
+}
+
+.menu__wrapper {
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ padding: 16px;
+ }
+}
+
+.menu__items {
+ display: flex;
+ flex-direction: column;
+
+ li {
+ padding: 16px;
+ border-right: 1px solid black;
+ width: 302px;
+ cursor: pointer;
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ border: none;
+ }
+
+ &:hover {
+ background: black;
+ color: white;
+ }
+ }
+}
+
+.menu__description {
+ width: 100%;
+ padding: 0 16px;
+
+ h2 {
+ margin-bottom: 20px;
+ @media screen and (max-width: 1024px) {
+ text-align: center;
+ }
+ }
+
+ @media screen and (max-width: 1024px) {
+ width: 100%;
+ }
+}
diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx
index f9a42a6..0eb6218 100644
--- a/src/components/main/Main.tsx
+++ b/src/components/main/Main.tsx
@@ -1,6 +1,30 @@
import React from "react";
+import { CustomForm } from "./Form/CustomForm";
+import style from "./Main.module.scss";
+import { BreadCrumb } from "./TitleAndBreadCrumb/BreadCrumb";
+import { Title } from "./TitleAndBreadCrumb/Title";
const Main = () => {
- return